Фронтенд разработчик с чего начать план изучения
Если бы я учил Frontend сегодня. Советы начинающим
Мой путь в веб-разработке начался 5 лет назад. За это время я успел испробовать множество технологий, а в последние 3 года развиваюсь в направлении frontend.
В этой статье я бы хотел ясно изложить, какие технологии необходимо изучить новичку, а также поделиться методами их освоения. Гайд ориентирован на людей, которые делают свои первые шаги в веб-разработке, и в нем я постараюсь подробно пояснять суть каждой технологии. Также в конце я расскажу, куда двигаться дальше.
Итак, ты хочешь стать Frontend разработчиком. Что для этого нужно?
HTML и CSS
Эти две технологии необходимы для верстки сайта. Верстка – это расположение текста, изображений, кнопок и других элементов интерфейса на странице.
С помощью HTML мы можем добавлять и описывать эти элементы. Изначально они будут «сырыми», со стандартным внешним видом. Для изменения стиля используется CSS. Он позволяет задавать цвет, размер, расположение и десятки других параметров внешнего вида элемента.
Как освоить
В первую очередь стоит ознакомиться с обзорной статьей или видеороликом об этих технологиях. Так ты поймешь их суть.
Затем верстку удобнее всего осваивать и совершенствовать на практике. Пробуй верстать макеты страниц или отдельных элементов. Также, можно попробовать смотреть на Youtube процесс верстки страницы и повторять за автором.
Поначалу будет сложно, и придется часто обращаться в гугл за решением очередной проблемы. Но со временем ты научишься быстро находить у себя в голове правильную структуру HTML и необходимые CSS свойства для верстки элемента.
Где брать идеи и макеты для верстки?
Я использовал Dribbble и CollectUI, но также можно поискать на Behance и One Page Love.
Также можно брать настоящие макеты из UI Store Design. Я советую верстать макеты из Figma, т.к. её используют многие дизайнеры, и в будущем ты вероятнее всего будешь работать именно с ней. А еще она бесплатна и работает в браузере.
JavaScript
С этого языка начинается программирование в вебе. Он позволяет управлять элементами на странице, описывать и контролировать взаимодействие с интерфейсом.
Если с HTML и CSS мы верстали страницу, то JavaScript отвечает за динамическую часть страницы: анимации, отображение данных, обработка действий и многое другое.
Зачем мне он нужен?
Простой пример. Предположим, есть страница, на которой по нажатию кнопки нужно отобразить модальное окно. HTML и CSS позволят нам сделать верстку самой страницы и модального окна. Однако зафиксировать и обработать нажатие на кнопку эти технологии не могут.
Здесь нам и нужен JavaScript. С помощью него мы описываем поведение на странице. В коде мы обозначаем: если пользователь нажал на кнопку, то нужно показать модальное окно.
Вот пример такой реализации и использованием JQuery:
С помощью JavaScript можно производить практически любые операции со страницей. Однако его возможности не ограничиваются окном браузера. С помощью платформы Node.js этот язык можно использовать для серверной разработки, сборки проектов, и многого другого. В будущем тебе это будет нужно, чтобы работать с большими проектами, собирая из через Webpack. Однако я советую сперва научиться использовать язык внутри браузера.
Как освоить
Лучше всего будет начать изучение на learn.javascript.ru. Это прекрасный ресурс, который является базой знаний как для новичков, так и для продвинутых разработчиков.
Здесь важно понять основы самого JavaScript, а также особенности его работы в браузере. Если какие-то темы покажутся тебе слишком сложными (к примеру, прототипы), то можешь пропустить их и вернуться позже.
Не стоит слишком увлекаться одной лишь теорией JavaScript. Я рекомендую параллельно с изучением пробовать свои силы и писать простые скрипты. Можно также пробовать разбирать чужие участки кода на Codepen.
Постепенно изучай новые плагины и библиотеки. Одной из самых популярных и простых для понимания является JQuery. С ней значительно проще взаимодействовать с содержимым страницы, и её можно довольно быстро освоить на базовом уровне.
По большому счету, ты часто будешь прибегать к использованию сторонних библиотек в своих проектах. Чтобы лучше понять, как это делается, рекомендую попробовать форматировать даты с помощью Luxon или сделать карусель через Owl Carousel.
Что дальше?
С базовыми навыками в HTML, CSS и JavaScript можно сделать красивый лендинг, сверстать страницы интернет-магазина или блога. Этим я и советую заниматься, чтобы закрепить знания в веб-разработке.
По большому счету, на этих технологиях можно написать почти любой интерфейс. Вопрос только в том, какая специфика будет у приложения, которое ты разрабатываешь. Чем оно больше и сложнее – тем больше различных библиотек, плагинов и технологий тебе потребуется, чтобы справиться с задачей.
Рекомендую ознакомиться с Frontend Roadmap. Здесь описаны технологии разработки интерфейсов, которые будут нужны тебе в дальнейшем.
В дальнейшем тебе наверняка будут интересны реактивные фреймворки, вроде React или Vue. Для сборки приложений на них ты освоишь Webpack, а для ускорения процесса верстки изучишь препроцессоры PUG и SASS. Или может быть захочешь углубиться в графику и научишься работать с D3 или WebGL.
Как ты уже понял, frontend в веб-разработке очень многогранен и богат различными технологиями для совершенно разных задач. Изучай, пробуй, экспериментируй и получай удовольствие от созидания красивых и удобных интерфейсов для любых целей. За это мы и любим фронтенд.
Фронтенд разработчик
Добро пожаловать на курс обучения Фронтенд разработчика!
Здесь мы предлагаем вам структурированный курс, который научит вас всему, что вам необходимо знать, чтобы стать фронтенд разработчиком. Изучение в рекомендуемом порядке каждого раздела позволит получить новые навыки, или улучшить имеющиеся. Также в каждом разделе вы найдёте упражнения и тесты. Прежде чем переходить к следующей теме обязательно проверьте себя.
Основные темы:
В курсе рассматриваются темы:
Различные разделы предназначены для проработки по порядку, но каждый из них также самодостаточен. Если вы, к примеру, уже хорошо знакомы с HTML, то можете перейти к разделу CSS.
Необходимые условия
Вам не нужно никаких предварительных знаний, чтобы начать этот курс. Всё, что вам необходимо – это компьютер, который может работать с современными браузерами, интернет соединение и готовность учиться.
Если вы не уверены, подходит ли вам фронтенд разработка и/или вы хотите получить подробное представление, то прежде чем начинать полный курс, вам следует сначала изучить наш раздел Начало работы с веб модулем.
Получить помощь
Мы постарались сделать изучение фронтенд разработки настолько комфортным, насколько это возможно. Вероятно, вы всё равно рано или поздно попадёте в безвыходное положение, когда что-то будет непонятно или какой-то код не будет работать.
Не беспокойтесь. Мы все иногда застреваем, и начинающие, и профессиональные веб-разработчики. Статья Обучение и получение помощи предоставит вам серию советов и подсказок для поиска информации и помощи самому себе. Если вы всё ещё в замешательстве, задайте вопрос по возникшей проблеме на нашем Форуме.
Путь обучения
Начало работы
Время изучения: 1–2 часа
Необходимые условия
Ничего, кроме базовой компьютерной грамотности.
Как понять, что я могу двигаться дальше?
В этой части курса нет оценок, но обязательно убедитесь, что вы ничего здесь не пропустили — важно всё настроить и подготовиться к выполнению упражнений в дальнейшем.
Основные руководства
Семантика и структура с HTML
Время завершения: 35–50 часов
Необходимые условия
Ничего, кроме базовой компьютерной грамотности и базовой среды разработки веб-приложений.
Как понять, что я могу двигаться дальше?
Основные модули
Стилизация и размещение с помощью CSS
Время завершения: 90–120 часов
Необходимые условия
Рекомендуется иметь базовые знания HTML перед началом изучения CSS. Сначала вы должны изучить Введение в HTML.
Как понять, что я могу двигаться дальше?
Основные модули
Дополнительные ресурсы
Интерактивность с JavaScript
Время завершения: 135–185 часов
Необходимые условия
Рекомендуется иметь базовые знания HTML перед началом изучения JavaScript. Сначала вы должны изучить Введение в HTML.
Как понять, что я могу двигаться дальше?
Основные модули
Веб формы — Работаем с данными пользователя
Время завершения: 40–50 часов
Необходимые условия
Для эффективного использования форм требуется знание HTML, CSS и JavaScript. Они сложны и поэтому рассматриваются отдельно.
Как понять, что я могу двигаться дальше?
Основные модули
Заставляем веб работать для всех
Время завершения: 60–75 часов
Необходимые условия
Как понять, что я могу двигаться дальше?
Основные модули
Современные инструменты
Время завершения: 55–90 часов
Необходимые условия
Рекомендуется ознакомиться с HTML, CSS и JavaScript перед началом работы с этим разделом, так как обсуждаемые инструменты работают со многими из этих технологий.
Как понять, что я могу двигаться дальше?
В этом наборе модулей нет специальных статей для оценки, но учебные примеры в конце 2-го и 3-го модулей хорошо подготовят вас к пониманию основ современного инструментария.
Краткий план по изучению фронтенда, или #100ДнейКода
Feb 14, 2019 · 14 min read
Это слегка самоуверенный учебный план по изучению фронденда за 100 дней. Поскольку он — этот план — охватывает широкий спектр тем, то его можно воспринимать как обзорный. Но он вряд ли подойдёт для глубокого погружения в какую-то отдельную область. После того, как вы завершите программу по этому учебному плану, вы получите общее представление о каждой из представленных в ней тем, и в дальнейшем сможете углубиться в любую из них при необходимости.
На создание этого учебного плана меня вдохновила дорожная карта Modern Frontend Developer Кармана Ахмеда. Это великолепно! Обязательно загляните по ссылке.
Пр и мечание: я знаю, что фронтенд включает в себя множество вещей и объединяет многих людей! Если вы разработчик и считаете, что это руководство можно улучшить, то создайте issue в репозитории проекта. Подробно процесс описан в разделе Contributing.
Если вы считаете, что этот учебный план полезен, то поставьте звезду в репозитории на Гитхабе, чтобы следить за обновлениями, и делитесь им в социальных сетях!
📆 Учебный план
Основным принципом этой учебной программы является то, что она ограничена по времени. Если раньше вы предпринимали попытки изучить фронтентд, то, скорее всего, попадали в кроличью нору и застревали на какой-то одной теме. В этом плане на каждую технологию отводится определённое количество дней, что позволяет вам переключаться, как только отведённое время закончилось.
Я предполагаю, что на старте все читатели будут разного уровня. Это нормально. Как начинающие, так и опытные разработчики смогут извлечь пользу из краткосрочной практики в каждой из представленных областей.
🔎 Подробности
Ниже вы найдёте небольшие заметки по каждой теме, а также некоторые идеи для практики. Для вдохновения загляните в раздел «Project Ideas» на Гитхабе.
Из-за ограничения по времени вы можете не успеть пройти все пункты из раздела «Темы и идеи». И это нормально. Получите максимум знаний за то время, что отводится на тему и двигайтесь дальше.
Язык разметки гипертекста (HTML) является стандартным языком разметки для создания веб-страниц и веб-приложений. В связке с каскадными таблицами стилей (CSS) и JavaScript он образует триаду краеугольных технологий веба. Браузеры получают HTML-документы с веб-сервера или из локального хранилища и превращают их в страницы. HTML описывает семантическую структуру страницы и обычно включает в себя подсказки для отрисовки/интерпретации документа браузерами.
💡 Напутствие
HTML действительно является основой веб-разработки. Даже в JavaScript-фреймворках вы так или иначе пишете HTML.
📖 Темы и идеи
Каскадные таблицы стилей (CSS) — это язык таблиц стилей, он используется для описания внешнего вида документа, написанного на языке разметки, например HTML. CSS является краеугольной технологией веба, наряду с HTML и JavaScript. CSS предназначен для разделения внешнего вида и содержимого, включая расположение элементов, цвета и шрифты. Такое разделение улучшает доступность контента, обеспечивает бо́льшую гибкость и контроль над свойствами внешнего вида.
💡 Напутствие
CSS это ещё один обязательный компонент веба. Хотя в основном с его помощью пишутся стили, но его возможности с каждым днём возрастают. Например, теперь возможно создавать анимации на чистом CSS. А раньше это можно было реализовать только при помощи JavaScript.
📖 Темы и идеи
JavaScript, часто называемый JS — это интерпретируемый высокоуровневый язык программирования, который является реализацией спецификации ECMAScript. Это язык, который также характеризуется как динамический, слабо типизированный, основанный на прототипах и мультипарадигмальный. Наряду с HTML и CSS, JavaScript является одной из трех основных технологий веба. JavaScript обеспечивает интерактивность страниц и, следовательно, является неотъемлемой частью веб-приложений. Подавляющее большинство сайтов используют его, и все основные браузеры имеют встроенный интерпретатор JavaScript.
💡 Напутствие
JavaScript занимает важное место во фронтенде. Хотя когда-то он использовался в основном для придания страницам динамики, сейчас он является основой многих фронтенд-фреймворков. Эти структуры решают множество задач, которые раньше выполнялись на сервере (например, маршрутизация и отображение различных тем оформления).
Как научиться фронтенд-разработке, найти первую работу и не набить шишек
Фронтенд, возможное, лучшее и самое приветливое направление, чтобы войти в ИТ. Но с ним не все так просто — во фронтенде легко начать и трудно стать мастером. В нем не будет мук выбора языка программирования, но будет борьба с его недостатками. В этой сфере есть очень много инструментов, изучение каждого из которых тянет на освоение отдельной профессии.
О том, как правильно учиться, как не набить шишек и двигаться по карьере, мы расспросили у Олега Шикова, декана факультета веб-разработки в GeekBrains и у Дарьи Дьячковой, начинающей веб-разработчицы.
В 2015 году Дарья Дьячкова поступила в НИУ ВШЭ на факультет Мировой экономики и мировой политики потому что в школе больше всего любила языки — учила английский и немецкий, постоянно выигрывала олимпиады. Ей нравилась эта сфера, но не до блеска в глазах, поэтому Дарья продолжала искать будущую профессию. В 2018 году она пришла на день карьеры в одно из HR-агентств, после которого сменила направление в неожиданном направлении.
«Я прошла длинный психологический тест, где мне посчитали тип личности-склад ума и прочее. Не в обиду психологам, но я к таким тестам отношусь скептически. После теста мне сказали, «эх, программист пропадает» и предложили послушать выступление про переход в мир ИТ. Я пожала плечами, пошла — и зажглась».
Дома она начала гуглить, смотреть обзоры профессий. Раньше Дарья мастерила веб-странички на Tilda и Wix, вела свой блог-обзор международных новостей, поэтому подумала о фронтенде в первую очередь. Тем не менее она просмотрела все вводные вебинары профессий и языков программирования, попробовала написать маленький кусочек кода на нескольких языках программирования и выбрала JS, как самый близкий по духу.
Что делают фронтендеры
«Если вы открываете любую страницу в браузере, все, что вы видите перед собой на странице — это делают фронтендеры. Но на самом деле их работа намного сложнее одного внешнего вида», — рассказывает Олег Шиков, декан факультета веб-разработки в GeekBrains.
Олег писал код с детства. Первые эксперименты были на языке С, а в 2011 году он перешел на Javascript. Многое из того, что есть в технологии сейчас, тогда только зарождалось. HTML и CSS не имели больших возможностей, а в индустрии преобладал Flash. Профессия в целом была намного проще — всего лишь HTML-верстка и несложное оформление. Достаточно было писать теги и красиво их оформлять на CSS. Пользователи нажимали кнопку, и страница полностью обновлялась. Уходил запрос на сервер, сервер отдавал новую верстку. Но такой подход не позволял делать отзывчивый интерфейс.
«Задача фронтендера в наши дни — строить логику сайтов на стороне браузера», — говорит Олег, «Эта логика разрабатывается на языке программирования JavaScript. Современные сайты могут полностью работать на стороне клиента, делая запросы серверу лишь изредка, например, чтобы сохранить данные пользователя или загрузить необходимую информацию. То есть сейчас мы запрашиваем не полностью обновленную страницу, а только необходимую информацию, и грамотно ее отрисовываем в браузере. Благодаря такому поведению, сайты становятся отзывчивее и экономят часть трафика пользователя».
Учить фронтенд — это учить JavaScript?
Определившись с направлением, Дарья поступила на факультет веб-разработки в GeekBrains. В представлении многих обучение фронтенду слилось с изучением языка Javascript, но, как считает Олег Шиков — это не совсем верно.
«Первое с чего надо начать — это конечно HTML. Он предельно прост, с ним очень легко справиться, очень легко написать свой первый сайт. Конечно, он не будет отзывчивым, но он будет работать, и его уже можно будет выложить в интернет. Далее необходимо добавить этому сайту красивый внешний вид, чтобы это было не просто полотно текста, а удобная и красивая страница с визуальными элементами. В этом поможет CSS – каскадные таблицы стилей. Пары недель хватит, чтобы освоить и HTML, и CSS. А сразу после надо приступать к JavaScript, потому что он — основа основ для того, чтобы делать отзывчивый интерфейс».
Но когда к технологии приходит популярность, следом за ней идет море критики. Многие опытные разработчики один за другим вскрывают в своих докладах, выступлениях и статьях проблемы и языка и предлагают альтернативы. Новичка эти обсуждения могут только сбить с пути. Как считает Олег, начинать изучение фронтенда с других языков только потому, что их больше хвалят профессионалы, будет ошибкой.
«Несколько лет назад все дружно ругали PHP, сейчас все дружно ругают JavaScript, это такой мейнстрим. Конечно, JavaScript не без проблем, с этим никто не спорит. Но например, TypeScript (другой популярный язык от Microsoft, являющийся расширением возможностей JS) не выполняется в браузере сам — он переводится (компилируется) в JavaScript. Если мы что-то напишем на TypeScript, то все равно получим JavaScript, который уже выполнится в браузере. Чтобы грамотно отлаживать код необходимо знать JavaScript и уметь работать с браузером».
Но Дарья находит время, чтобы учить вещи, которые и не входят в программу.
«Я привыкла много учить и разбираться до конца, я из тех людей, кто читает все дополнительные материалы к статьям и делает доп.задания, потому что им просто интересно. Нахожу время осваивать, например, Nuxt.js, Typescript, Vue.js, Webpack и Stylus».
Что такое React, Vue и Angular и как их выбирать
Помимо Javascript и других языков от фронтендеров требуют знание различных инструментов для работы. На чистом JavaScript довольно сложно разрабатывать интерактивные отзывчивые интерфейсы веб-страниц без использования сторонних библиотек.
Библиотека — это тоже JavaScript код, уже написанный другими разработчиками. Он предоставляет удобный набор решений, чтобы выполнять заготовленные действия, которые регулярно требуются в работе. В вебе есть большое разнообразие таких библиотек, которые упрощают написание отзывчивых интерфейсов для веб-сайтов. В их числе самые известные — это React, Vue и Angular.
«Выбор между ними — сложный вопрос. Можно выучить все три. Это не сверхсложная задача, потому что когда поймешь, как работать с одним, каждый последующий будет учить проще. Но по моим наблюдениям, они используются немного в разных сферах. Angular — один из самых старых. Он чаще используется в корпоративном сегменте, на больших проектах, с поддержкой легаси кода, который был написан несколько лет назад. React используется повсеместно. Он первый в списке, когда пишут новые интерфейсы и веб-сервисы. Про Vue можно сказать, что он простой, молодой, крутой и мейнстримный.
Я бы советовал попробовать написать простую логику на всех трех фреймворках — условно говоря todo лист — на основании своих ощущений понять, какой нравится больше, и учить его. Либо посмотреть вакансии в своем городе, и выбирать, например, React, потому что большинство вакансий на фронтенд-разработчиков требуют знания именно React. Но переучиваться потом будет не сложно».
Дарья пишет приключенческие романы и разрабатывает на Nuxt.js справочник по вселенной своей книги. Еще она делает проекты и лендинги для своих друзей, поэтому выучила адаптивную верстку, медиа-запросы и прочее. «Я начала React.js, придумала проект на будущее, который хочу воплотить на React Native. Пока планирую архитектуру, рисую блок-схемами, и читаю про технологии, которые можно использовать».
Как проходит учеба
«Когда началось обучение, преподаватели все отлично объясняли – для меня важно выстроить полученные знания в систему. Домашние задания помогали закрепить навык, бонусом давали наводку где и что ещё поучить. Много читала и осваивала сама, смотрела руководства и мини уроки на YouTube. На GeekBrains всегда можно написать преподавателю или наставнику курса или своей группе в чат. Все помогут, объяснят. Если нашел интересную статью – тоже есть с кем поделиться и обсудить.
Думаю, ощущения, когда видишь свой первый Hello world, не забудет никто. Да и в целом, ощущения, когда сделал по макету красивый UI, а он ещё и работает – это драйв».
Учеба длится полтора года. Олег Шиков считает, что просто учить синтаксис — это скучно, поэтому учеба сразу строится вокруг проектов. «Мы даем базовые вещи, синтаксис, и сразу пытаемся применить их на практике, пишем простые веб-страницы. После этого мы даем PHP, тем самым обучая студентов бекенд (серверной) разработке. Некоторым начинающим разработчикам кажется, что достаточно выучить HTML с JavaScript, и этого хватит, чтобы стать востребованным на рынке. На деле не совсем так. Нужно знать архитектуру, алгоритмы, паттерны и фреймворки — и не просто знать. Необходима еще практика, надо написать свой продукт, поучаствовать в коллективной разработке».
В начале обучения студенты пишут код по отдельности, проверяя его с преподавателем, а к середине обучения начинают разрабатывать продукт вместе со своими одногруппниками, благодаря чему получают опыт командной разработки.
Помимо учебы Дарья любит заниматься на платформе Kodiri.com, где проходят международные соревнования по JS. «Там можно тренироваться и одному, решать задания на время, точность и красоту кода. Я познакомилась с основателем платформы Рикардо — он классный парень. Теперь пишу для них задачки. К каждому заданию я прикладываю эталонное решение и тесты (так я, кстати, начала писать юнит тесты). Мне забавно соревноваться с другими игроками, когда вероятность, что хотя бы одно из пяти заданий будет твоего авторства ≈0.94. Да, я посчитала, мне было любопытно, почему я так часто их встречаю. Свои честно решаю и в ответы не смотрю. Захватывает элемент геймификации, я уже получила высшие погоны (Императорское Величество), теперь осталось подвинуть Юраша как лучшего игрока месяца. Этого элемента игры и духа соревнования в обучении мне недоставало, в целом, думаю, стоит добавлять подобные возможности в образовательные платформы. Несколько дней задачек Kodiri на скорость, и я во сне напишу arr.map(e =>».
Поиски первой работы
На каком этапе начинать поиски работы — очень спорный вопрос в индустрии. Одни убеждены, что только годы обучения и проработки теории на практике в безопасных условиях дают человеку право просить деньги за разработку. Другие наоборот — что учиться надо работая на настоящей работе. По словам преподавателя многие студенты идут по второму пути.
«Я знаю студентов, которые получали первые заказы или устраивались в фирмы на третей четверти. Они продолжали обучение, совмещая его уже с работой. Все зависит от человека и его способности учиться. Начинающему разработчику проще устроиться в маленькую компанию, чем в большую. В компаниях вроде Mail.ru или «Яндекс» строгий отбор. Далеко не каждый опытный разработчик сможет туда устроиться. Но попытать счастья, конечно, может каждый».
Когда у Дарьи за плечами было полгода обучения и резюме-портфолио в форме сайта, она прошла несколько собеседований, но навыков устроиться фронтенд разработчиком ей не хватило.
«На первом собеседовании было страшно. Я откликнулась на вакансию фронтенд разработчик Vue. Готовилась тщательно, повторила весь материал JS и Vue, и все что выучила за полгода GeekUniversity, разобрала tricky questions и всякие мелочи, где JS ведёт себя непредсказуемо. Собеседование проходило по Skype. Небольшая компания, сразу техническое интервью, минуя HR. Я бодро отвечала на вопросы, мы говорили целый час… а потом оказалось, что они всё-таки искали фулстек разработчика. Бывает».
На Хабр Карьере вы можете посмотреть свежие вакансии для фронтендеров и подписаться на рассылку новых.
«Джуниор-разработчикам задают простые вопросы, чтобы убедиться, что они знают основы», считает Олег, — «Я бы спросил про адаптивную и семантическую верстку, про то, как работать с чистым JavaScript. Сейчас тренд на фреймворки и библиотеки, те же React, Vue и Angular, а «ванильный» JavaScript без дополнительных библиотек — его не все знают. Я бы хотел убедиться, что разработчик знает, как с ним работать, а не сразу кинулся в лагерь условного React.
В любом случае вам придется потратить какое-то время, чтобы откликаться на разные вакансии, проходить разные собеседования. Проходить их — это тоже определенный опыт и навык. Отказы — это нормальная ситуация, бояться вообще не нужно»
«Спустя ещё два собеседования мне порекомендовали продолжить обучение и попробовать снова позже. Нужны были и общие знания — протоколы, архитектурные решения и прочее. Я и сама понимала, устраиваться было рано. Поэтому нашла классную смежную работу с ИТ — устроилась инженером технической поддержки в Букмейт. В обязанностях отвечать читателям на вопросы по работе приложения и сайта, что-то мелкое советовать как чинить, на проблемы покрупнее оформлять баги в JIRA и Confluence. Плюс, теперь отлично представляю, как обычные пользователи юзают UI/UX нашего приложения. Подсказка, «это не баг, это фича». Или когда разработчики хотели как лучше, а пользователи не поняли, как это и зачем.
Хороший шанс посмотреть на обе стороны — как пользователи юзают приложение, и как разработчики его развивают и чинят».
Как развиваться в профессии
— Я бы советовал развиваться в фулстек-разработчика, знать и бекенд, и фронтенд. Если же говорить только про фронтенд, то — хоть и необходимо хорошо знать JavaScript — без фреймворков никуда. Их надо учить.
На TypeScript стоит посмотреть, хоть его и не требуют во всех вакансиях. На самом деле он интересный, и JavaScript-разработчику выучить его очень просто. По факту это тот же самый язык с дополнительными фичами, которые позволяют писать более надежные системы. TypeScript добавляет в язык явную систему типов, которая позволяет сказать, что эта переменная будет числовая, а эта переменная — строковая.
В чистом JavaScript такого нет, там переменная может иметь любой тип, и это иногда приводит к ошибкам. Вы ожидаете число в переменной, а получаете, например, строку или объект, и у вас из-за этого ломается логика работы программы. TypeScript помогает избежать такой ошибки.
Сейчас многие смотрят в сторону PWA. Дело в том, что, как я уже говорил, рынок смартфонов огромный. Большинство пользователей, которые заходят к вам на сайт, с большой вероятностью делают это с телефона.
PWA (Progressive Web Applications) — это сайты, которые имеют дополнительные возможности, позволяющие удобно работать с ними в том числе со смартфона. Например, на андроиде PWA-сайт можно добавить себе на на стартовый экран и запускать, просто нажимая иконку. Есть возможности, которые позволяют улучшить сайт так, что он будет работать, даже когда на смартфоне нет интернета. То есть, это практически нативное приложение. Недавно Google выпустил обновление Google Play, благодаря которому вы можете добавить свой PWA-сайт в магазин, и пользователи смогут его скачивать и обновлять как обычное нативное приложение, которое почти неотличимо от обычного, написанного, например, на Java. А на самом деле оно написано на JavaScript и сверстано с помощью HTML.
Зарплаты
Медиана зарплаты фронтендера-стажёра находится на уровне 35 тысяч рублей. Специалист младшего уровня может рассчитывать на 50 тыс., миддл — уже на 97 тыс. Синьор и лид получают в среднем 170-190 тысяч рублей.
По данным калькулятора зарплат Хабр Карьеры средняя зарплата фронтенд-разработчика составляет чуть менее 110 000 рублей (диаграмма кликабельна).
Что почитать и посмотреть для самостоятельного изучения
Книги непосредственно про JS и HTML/CSS:
Книги по программированию: