0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>22 авг 2023</li>
2
<ul><li>22 авг 2023</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><h2>Кто такой фронтенд-разработчик и как им стать</h2>
4
</ul><h2>Кто такой фронтенд-разработчик и как им стать</h2>
5
<p>Рассказываем о самой красивой профессии в вебе: что учить, как развиваться и каких зарплат ждать будущему фронтендеру.</p>
5
<p>Рассказываем о самой красивой профессии в вебе: что учить, как развиваться и каких зарплат ждать будущему фронтендеру.</p>
6
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
7
<p>Пишет о сетях, инструментах для разработчиков и языках программирования. Любит готовить, играть в инди‑игры и программировать на Python.</p>
7
<p>Пишет о сетях, инструментах для разработчиков и языках программирования. Любит готовить, играть в инди‑игры и программировать на Python.</p>
8
<p>В современном интернете всё работает как часы: страницы плавно прокручиваются, текст не съезжает при масштабировании, а кнопки чутко реагируют на клики и наведение. Всё это благодаря программистам особой специализации - фронтендерам. Подробнее о них рассказываем в этой статье.</p>
8
<p>В современном интернете всё работает как часы: страницы плавно прокручиваются, текст не съезжает при масштабировании, а кнопки чутко реагируют на клики и наведение. Всё это благодаря программистам особой специализации - фронтендерам. Подробнее о них рассказываем в этой статье.</p>
9
<ul><li><a>Кто такой фронтенд-разработчик</a></li>
9
<ul><li><a>Кто такой фронтенд-разработчик</a></li>
10
<li><a>Чем он занимается</a></li>
10
<li><a>Чем он занимается</a></li>
11
<li><a>Что он должен уметь и знать</a></li>
11
<li><a>Что он должен уметь и знать</a></li>
12
<li><a>Где работают фронтенд-разработчики</a></li>
12
<li><a>Где работают фронтенд-разработчики</a></li>
13
<li><a>Сколько они зарабатывают</a></li>
13
<li><a>Сколько они зарабатывают</a></li>
14
<li><a>Как стать фронтенд-разработчиком</a></li>
14
<li><a>Как стать фронтенд-разработчиком</a></li>
15
</ul><p><strong>Фронтенд-разработчик (frontend developer</strong>, фронтендер)<strong></strong>- это специалист, который создаёт интерфейсы для сайтов и веб-приложений. Он отвечает за то, с чем пользователи взаимодействуют на страницах: текст, изображения, анимации, кнопки, формы, слайдеры, галереи и прочие "красивости". Ещё фронтендер делает так, чтобы сайт одинаково хорошо работал на всех устройствах.</p>
15
</ul><p><strong>Фронтенд-разработчик (frontend developer</strong>, фронтендер)<strong></strong>- это специалист, который создаёт интерфейсы для сайтов и веб-приложений. Он отвечает за то, с чем пользователи взаимодействуют на страницах: текст, изображения, анимации, кнопки, формы, слайдеры, галереи и прочие "красивости". Ещё фронтендер делает так, чтобы сайт одинаково хорошо работал на всех устройствах.</p>
16
<p>На противоположном от фронтендеров полюсе находятся бэкендеры. Это разработчики, которые продумывают логику работы веб-приложений. Они отвечают за то, чтобы данные быстро и безопасно летали от сервера к пользователю и обратно.</p>
16
<p>На противоположном от фронтендеров полюсе находятся бэкендеры. Это разработчики, которые продумывают логику работы веб-приложений. Они отвечают за то, чтобы данные быстро и безопасно летали от сервера к пользователю и обратно.</p>
17
<p>Если проще, фронтендеры пишут кнопки, а бэкендеры - то, что происходит на сервере после того, как вы на эту кнопку нажмёте.</p>
17
<p>Если проще, фронтендеры пишут кнопки, а бэкендеры - то, что происходит на сервере после того, как вы на эту кнопку нажмёте.</p>
18
<p>Чтобы было проще разобраться, давайте сравним фронтендера с портным. Портной получает эскиз от дизайнера и делает по нему удобную одежду: чтобы ничего не жало в боках и талии, резинки не натирали кожу, а петли нормально держали пуговицы.</p>
18
<p>Чтобы было проще разобраться, давайте сравним фронтендера с портным. Портной получает эскиз от дизайнера и делает по нему удобную одежду: чтобы ничего не жало в боках и талии, резинки не натирали кожу, а петли нормально держали пуговицы.</p>
19
<p>Так же и с сайтами: фронтендер берёт макет дизайнера и делает из него удобный продукт - следит за тем, чтобы элементы не закрывали контент, все скрипты срабатывали вовремя, а кнопки нажимались как надо. А ещё хороший фронтендер владеет адаптивной магией, которая позволяет сделать так, чтобы сайт выглядел круто на разных экранах.</p>
19
<p>Так же и с сайтами: фронтендер берёт макет дизайнера и делает из него удобный продукт - следит за тем, чтобы элементы не закрывали контент, все скрипты срабатывали вовремя, а кнопки нажимались как надо. А ещё хороший фронтендер владеет адаптивной магией, которая позволяет сделать так, чтобы сайт выглядел круто на разных экранах.</p>
20
Пример хорошего фронтенда - сервис для создания макетов Figma<em>Скриншот: Figma / Skillbox Media</em><p>Вот что входит в задачи фронтендера:</p>
20
Пример хорошего фронтенда - сервис для создания макетов Figma<em>Скриншот: Figma / Skillbox Media</em><p>Вот что входит в задачи фронтендера:</p>
21
<ul><li><strong>Разработка пользовательского интерфейса.</strong>Создание и расположение всех элементов, с которыми взаимодействует пользователь: кнопок, форм, меню, слайдеров, галереи обоев - и далее по списку.</li>
21
<ul><li><strong>Разработка пользовательского интерфейса.</strong>Создание и расположение всех элементов, с которыми взаимодействует пользователь: кнопок, форм, меню, слайдеров, галереи обоев - и далее по списку.</li>
22
<li><strong>Вёрстка.</strong>Разработчик стилизует элементы на странице, чтобы информация отображалась правильно.</li>
22
<li><strong>Вёрстка.</strong>Разработчик стилизует элементы на странице, чтобы информация отображалась правильно.</li>
23
<li><strong>Интерактивность</strong> - оживляет страницы с помощью интерактивных элементов, анимаций и скриптов обработки действий пользователя.</li>
23
<li><strong>Интерактивность</strong> - оживляет страницы с помощью интерактивных элементов, анимаций и скриптов обработки действий пользователя.</li>
24
<li><strong>Адаптивность.</strong>Фронтендер делает сайт "гибким", чтобы он хорошо отображался на различных устройствах и экранах.</li>
24
<li><strong>Адаптивность.</strong>Фронтендер делает сайт "гибким", чтобы он хорошо отображался на различных устройствах и экранах.</li>
25
<li><strong>Тестирование и оптимизация.</strong>Фронтендер тестирует работоспособность интерфейса, исправляет ошибки и оптимизирует производительность для быстрой загрузки страниц.</li>
25
<li><strong>Тестирование и оптимизация.</strong>Фронтендер тестирует работоспособность интерфейса, исправляет ошибки и оптимизирует производительность для быстрой загрузки страниц.</li>
26
</ul><p>Фронтенд - отличное направление для старта в IT. Если хотите писать код и сразу видеть результат - вам прямая дорога во фронтенд-разработчики. Начать путь в этой сфере можно на <a>курсе Skillbox</a>.</p>
26
</ul><p>Фронтенд - отличное направление для старта в IT. Если хотите писать код и сразу видеть результат - вам прямая дорога во фронтенд-разработчики. Начать путь в этой сфере можно на <a>курсе Skillbox</a>.</p>
27
<p>Фронтенд держится на трёх китах:</p>
27
<p>Фронтенд держится на трёх китах:</p>
28
<ul><li>Разметка - язык HTML.</li>
28
<ul><li>Разметка - язык HTML.</li>
29
<li>Стили - язык CSS.</li>
29
<li>Стили - язык CSS.</li>
30
<li>Скрипты - язык JavaScript.</li>
30
<li>Скрипты - язык JavaScript.</li>
31
</ul><p>Это базовые технологии, без них невозможно построить ни один сайт, поэтому остановимся на них подробнее.</p>
31
</ul><p>Это базовые технологии, без них невозможно построить ни один сайт, поэтому остановимся на них подробнее.</p>
32
<p>HTML - язык гипертекстовой разметки. Он делает из простыни текста структурированный документ с заголовками, подзаголовками и прочими элементами. Разберём на примере. Вставьте в блокнот следующий текст, сохраните файл и откройте его с помощью браузера.</p>
32
<p>HTML - язык гипертекстовой разметки. Он делает из простыни текста структурированный документ с заголовками, подзаголовками и прочими элементами. Разберём на примере. Вставьте в блокнот следующий текст, сохраните файл и откройте его с помощью браузера.</p>
33
<p>Привет, это тестовая страница!</p>
33
<p>Привет, это тестовая страница!</p>
34
<p>Это простой HTML-код для проверки.</p>
34
<p>Это простой HTML-код для проверки.</p>
35
<p>Элемент списка 1</p>
35
<p>Элемент списка 1</p>
36
<p>Элемент списка 2</p>
36
<p>Элемент списка 2</p>
37
<p>Элемент списка 3</p>
37
<p>Элемент списка 3</p>
38
<p>Нажмите на ссылку, чтобы вернуться обратно:</p>
38
<p>Нажмите на ссылку, чтобы вернуться обратно:</p>
39
<p>Крутая статья про фронтенд</p>
39
<p>Крутая статья про фронтенд</p>
40
<p>Выглядит не очень впечатляюще. Чтобы сделать нашу страничку читабельнее, воспользуемся HTML. Для этого зайдите в <a>редактор кода</a>и вставьте в окошко с названием "HTML" код ниже. Если вы читаете со смартфона, то визуально окошко будет одно, но с тремя вкладками. Вам нужна вкладка HTML.</p>
40
<p>Выглядит не очень впечатляюще. Чтобы сделать нашу страничку читабельнее, воспользуемся HTML. Для этого зайдите в <a>редактор кода</a>и вставьте в окошко с названием "HTML" код ниже. Если вы читаете со смартфона, то визуально окошко будет одно, но с тремя вкладками. Вам нужна вкладка HTML.</p>
41
<!DOCTYPE html> <html> <head> <title>Тестовая страница</title> </head> <body> <h1>Привет, это тестовая страница!</h1> <p>Это простой HTML-код для проверки.</p> <ul> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> </ul> <p>Нажмите на ссылку, чтобы вернуться обратно:</p> <a href="https://skillbox.ru/media/code/eta-statiya/">Крутая статья про фронтенд</a> </body> </html><p>Уже гораздо лучше! Теперь у нас есть гиперссылка, маркированный список и полноценный заголовок, выделенный жирным шрифтом. Но пока всё равно выглядит скромненько. Чтобы стало лучше, используем CSS.</p>
41
<!DOCTYPE html> <html> <head> <title>Тестовая страница</title> </head> <body> <h1>Привет, это тестовая страница!</h1> <p>Это простой HTML-код для проверки.</p> <ul> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> </ul> <p>Нажмите на ссылку, чтобы вернуться обратно:</p> <a href="https://skillbox.ru/media/code/eta-statiya/">Крутая статья про фронтенд</a> </body> </html><p>Уже гораздо лучше! Теперь у нас есть гиперссылка, маркированный список и полноценный заголовок, выделенный жирным шрифтом. Но пока всё равно выглядит скромненько. Чтобы стало лучше, используем CSS.</p>
42
<p>CSS расшифровывается как cascading style sheets - "каскадные таблицы стилей". Каскадные - потому что элементы стиля применяются к элементам разметки как бы сверху вниз, то есть последовательной цепочкой.</p>
42
<p>CSS расшифровывается как cascading style sheets - "каскадные таблицы стилей". Каскадные - потому что элементы стиля применяются к элементам разметки как бы сверху вниз, то есть последовательной цепочкой.</p>
43
<p>С помощью CSS мы прописываем, как будут выглядеть наши структурные элементы - заголовки, подписи, таблицы, графики. Чтобы посмотреть, как это работает, добавьте следующий код в среднее окошко<a>редактора CodePen</a>(вкладка CSS). HTML-код из предыдущего раздела удалять не нужно.</p>
43
<p>С помощью CSS мы прописываем, как будут выглядеть наши структурные элементы - заголовки, подписи, таблицы, графики. Чтобы посмотреть, как это работает, добавьте следующий код в среднее окошко<a>редактора CodePen</a>(вкладка CSS). HTML-код из предыдущего раздела удалять не нужно.</p>
44
body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 20px; } h1 { color: #007bff; } p { font-size: 18px; color: #333; } ul { list-style-type: square; } a { color: #007bff; text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; }<p>Со шрифтами и цветами стало лучше. Но нет предела совершенству - добавим нашей странице интерактивности. Для этого нам понадобится JavaScript.</p>
44
body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 20px; } h1 { color: #007bff; } p { font-size: 18px; color: #333; } ul { list-style-type: square; } a { color: #007bff; text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; }<p>Со шрифтами и цветами стало лучше. Но нет предела совершенству - добавим нашей странице интерактивности. Для этого нам понадобится JavaScript.</p>
45
<p>JavaScript - это язык управления скриптами, то есть интерактивными элементами на сайте: кнопками, анимациями, слайдерами, галереями обоев и прочей красотой. А ещё, в отличие от CSS и HTML, это настоящий язык программирования, на котором пишут сложные веб-интерфейсы.</p>
45
<p>JavaScript - это язык управления скриптами, то есть интерактивными элементами на сайте: кнопками, анимациями, слайдерами, галереями обоев и прочей красотой. А ещё, в отличие от CSS и HTML, это настоящий язык программирования, на котором пишут сложные веб-интерфейсы.</p>
46
<p>Слишком сложные штуки мы делать не будем, но давайте оживим немного нашу страничку. Для этого вставьте в правое окошко (вкладка JavaScript) код:</p>
46
<p>Слишком сложные штуки мы делать не будем, но давайте оживим немного нашу страничку. Для этого вставьте в правое окошко (вкладка JavaScript) код:</p>
47
const body = document.body; const colors = ['#007bff', '#28a745', '#ffc107', '#dc3545']; let currentColorIndex = 0; body.addEventListener('click', function() { currentColorIndex = (currentColorIndex + 1) % colors.length; const nextColor = colors[currentColorIndex]; body.style.transition = 'background-color 0.5s ease'; body.style.backgroundColor = nextColor; });<p>Теперь, если кликнуть на нашу страничку, цвет фона изменится.</p>
47
const body = document.body; const colors = ['#007bff', '#28a745', '#ffc107', '#dc3545']; let currentColorIndex = 0; body.addEventListener('click', function() { currentColorIndex = (currentColorIndex + 1) % colors.length; const nextColor = colors[currentColorIndex]; body.style.transition = 'background-color 0.5s ease'; body.style.backgroundColor = nextColor; });<p>Теперь, если кликнуть на нашу страничку, цвет фона изменится.</p>
48
<p>Поздравляем! У нас есть собственный сайт со вполне любопытным интерфейсом. Но это далеко не всё. Чтобы создавать по-настоящему мощные веб-приложения вроде Figma, Canva или Spotify, понадобятся инструменты посерьёзнее. О них мы поговорим в следующем разделе.</p>
48
<p>Поздравляем! У нас есть собственный сайт со вполне любопытным интерфейсом. Но это далеко не всё. Чтобы создавать по-настоящему мощные веб-приложения вроде Figma, Canva или Spotify, понадобятся инструменты посерьёзнее. О них мы поговорим в следующем разделе.</p>
49
<p>Если хотите стать профессиональным фронтендером и работать в коммерческих проектах, придётся постоянно обновлять знания и осваивать новые технологии. А начать можно с этого набора.</p>
49
<p>Если хотите стать профессиональным фронтендером и работать в коммерческих проектах, придётся постоянно обновлять знания и осваивать новые технологии. А начать можно с этого набора.</p>
50
<p><strong>Сборка проектов.</strong>Современный сайт - это не единая платформа, а бутерброд из множества модулей, раскиданных по разным файлам. Чтобы всё работало как надо, эти файлы нужно правильно собрать. За это отвечают специальные программы - сборщики, или, по-простому, билдеры. Популярные сборщики во фронтенде - Gulp и Webpack. Про последний у нас есть<a>подробный материал</a>, рекомендуем почитать.</p>
50
<p><strong>Сборка проектов.</strong>Современный сайт - это не единая платформа, а бутерброд из множества модулей, раскиданных по разным файлам. Чтобы всё работало как надо, эти файлы нужно правильно собрать. За это отвечают специальные программы - сборщики, или, по-простому, билдеры. Популярные сборщики во фронтенде - Gulp и Webpack. Про последний у нас есть<a>подробный материал</a>, рекомендуем почитать.</p>
51
<p><strong>Вёрстка по макету.</strong>Любой сайт начинается с дизайнерского макета, на основе которого разработчик пишет код. Сейчас макеты делают в Figma - графическом редакторе, заточенном на работу с веб-страницами. Разработкой самого макета будет заниматься дизайнер. Вам, как разработчику, нужно будет понимать, как перенести этот макет в веб и оживить.</p>
51
<p><strong>Вёрстка по макету.</strong>Любой сайт начинается с дизайнерского макета, на основе которого разработчик пишет код. Сейчас макеты делают в Figma - графическом редакторе, заточенном на работу с веб-страницами. Разработкой самого макета будет заниматься дизайнер. Вам, как разработчику, нужно будет понимать, как перенести этот макет в веб и оживить.</p>
52
<p><strong>JavaScript-фреймворки.</strong>Фреймворки в программировании - это готовые решения, которые помогают разработчикам проще и быстрее писать код для типовых задач.</p>
52
<p><strong>JavaScript-фреймворки.</strong>Фреймворки в программировании - это готовые решения, которые помогают разработчикам проще и быстрее писать код для типовых задач.</p>
53
<p>Чтобы было понятнее, представьте, что вам нужно приготовить окрошку. Можно отдельно купить все ингредиенты и нарезать их, а можно взять окрошечный набор, в котором все продукты уже нарезаны. Фреймворк здесь - окрошечный набор. При работе с кодом фреймворк даёт готовые шаблоны, которые остаётся подогнать под проект.</p>
53
<p>Чтобы было понятнее, представьте, что вам нужно приготовить окрошку. Можно отдельно купить все ингредиенты и нарезать их, а можно взять окрошечный набор, в котором все продукты уже нарезаны. Фреймворк здесь - окрошечный набор. При работе с кодом фреймворк даёт готовые шаблоны, которые остаётся подогнать под проект.</p>
54
<p>Пять наиболее популярных среди разработчиков JavaScript-фреймворков, согласно Stack Overflow, - это React, Node.js, jQuery, Angular и Express.</p>
54
<p>Пять наиболее популярных среди разработчиков JavaScript-фреймворков, согласно Stack Overflow, - это React, Node.js, jQuery, Angular и Express.</p>
55
<em>Скриншот:<a>Stack Overflow</a>/ Skillbox Media</em><p><strong>Препроцессоры CSS.</strong>Если работу с JavaScript облегчают фреймворки, то для CSS есть препроцессоры - программы, которые прогоняют CSS-код и на выходе адаптируют его под разные браузеры. Чаще всего используют два препроцессора - SASS и LESS. Наборы функций у них мало различаются, поэтому учить можно любой - пересесть будет довольно просто.</p>
55
<em>Скриншот:<a>Stack Overflow</a>/ Skillbox Media</em><p><strong>Препроцессоры CSS.</strong>Если работу с JavaScript облегчают фреймворки, то для CSS есть препроцессоры - программы, которые прогоняют CSS-код и на выходе адаптируют его под разные браузеры. Чаще всего используют два препроцессора - SASS и LESS. Наборы функций у них мало различаются, поэтому учить можно любой - пересесть будет довольно просто.</p>
56
<p><strong>Адаптивность и кросс-браузерность.</strong>Сайт должен одинаково хорошо работать на всех устройствах и во всех браузерах. Часто для десктопной и мобильной версий требуется разная функциональность, и фронтенд-разработчик должен уметь её реализовать. Для этого понадобится три инструмента CSS: методы компоновки элементов<a>Flex</a>и <a>Grid</a>, а также<a>медиазапросы</a> - правила, которые позволяют задавать условия отображения в зависимости от устройства.</p>
56
<p><strong>Адаптивность и кросс-браузерность.</strong>Сайт должен одинаково хорошо работать на всех устройствах и во всех браузерах. Часто для десктопной и мобильной версий требуется разная функциональность, и фронтенд-разработчик должен уметь её реализовать. Для этого понадобится три инструмента CSS: методы компоновки элементов<a>Flex</a>и <a>Grid</a>, а также<a>медиазапросы</a> - правила, которые позволяют задавать условия отображения в зависимости от устройства.</p>
57
<p><strong>Системы контроля версий.</strong>Бывает так, что разработка идёт хорошо, но вот кто-то добавляет новую функцию - и проект складывается, как карточный домик. На такой случай каждый этап работы документируется и сохраняется, чтобы можно было откатить проект до состояния, когда всё работало как надо. Для этого и нужны системы контроля версий. Чаще всего компании требуют знания Git - одной из таких систем.</p>
57
<p><strong>Системы контроля версий.</strong>Бывает так, что разработка идёт хорошо, но вот кто-то добавляет новую функцию - и проект складывается, как карточный домик. На такой случай каждый этап работы документируется и сохраняется, чтобы можно было откатить проект до состояния, когда всё работало как надо. Для этого и нужны системы контроля версий. Чаще всего компании требуют знания Git - одной из таких систем.</p>
58
<p>Множеству компаний нужен хороший и удобный сайт, а значит, и фронтенд-разработчики. Это множество делится на два подмножества: компании, которые пишут софт на заказ, и компании, которые пишут софт для своих нужд.</p>
58
<p>Множеству компаний нужен хороший и удобный сайт, а значит, и фронтенд-разработчики. Это множество делится на два подмножества: компании, которые пишут софт на заказ, и компании, которые пишут софт для своих нужд.</p>
59
<p>У работы в компании, которая занимается заказной разработкой, есть свои плюсы: вы сможете поучаствовать в разнообразных проектах, набраться опыта, освоить массу инструментов и прокачать творческий подход к задачам.</p>
59
<p>У работы в компании, которая занимается заказной разработкой, есть свои плюсы: вы сможете поучаствовать в разнообразных проектах, набраться опыта, освоить массу инструментов и прокачать творческий подход к задачам.</p>
60
<p>Главный минус заказной разработки - строгие дедлайны, а значит, высокий уровень стресса. Если вы не любите учиться новому, придётся тяжко - вам понадобится изучать новые технологии и подходы для каждого проекта. Ещё эта работа плохо подходит интровертам - придётся много общаться с заказчиками.</p>
60
<p>Главный минус заказной разработки - строгие дедлайны, а значит, высокий уровень стресса. Если вы не любите учиться новому, придётся тяжко - вам понадобится изучать новые технологии и подходы для каждого проекта. Ещё эта работа плохо подходит интровертам - придётся много общаться с заказчиками.</p>
61
<p>Среди преимуществ работы на компанию с собственным софтом - спокойный график и глубокое освоение определённой технологии. Заказчики лучше знают, чего хотят, поэтому объяснять очевидные вещи не придётся. Из минусов: опыт будет хоть и глубоким, но ограниченным, а задачи - однотипными. Здесь не получится попробовать всё понемногу. Если направление вам неинтересно - придётся смириться или искать что-то другое.</p>
61
<p>Среди преимуществ работы на компанию с собственным софтом - спокойный график и глубокое освоение определённой технологии. Заказчики лучше знают, чего хотят, поэтому объяснять очевидные вещи не придётся. Из минусов: опыт будет хоть и глубоким, но ограниченным, а задачи - однотипными. Здесь не получится попробовать всё понемногу. Если направление вам неинтересно - придётся смириться или искать что-то другое.</p>
62
<p>Новичку с горящими глазами полезнее будет сначала поработать с теми, кто пишет софт на заказ, - так вы перепробуете кучу технологий и найдёте то, что вам интереснее всего. А уже после этого сможете выбрать специализацию внутри фронтенда и осознанно искать работу там, где вам интересно, и изучать приглянувшийся набор инструментов.</p>
62
<p>Новичку с горящими глазами полезнее будет сначала поработать с теми, кто пишет софт на заказ, - так вы перепробуете кучу технологий и найдёте то, что вам интереснее всего. А уже после этого сможете выбрать специализацию внутри фронтенда и осознанно искать работу там, где вам интересно, и изучать приглянувшийся набор инструментов.</p>
63
<p>По данным "Хабр Карьеры"<a>за первое полугодие 2023 года</a>, медианная зарплата фронтендера в России - 180 000 рублей. Но это только для российских компаний. Чтобы получить более полную картину, мы собрали данные HeadHunter, Stack Overflow, Indeed и других порталов и составили таблицу зарплат фронтендеров по странам и грейдам.</p>
63
<p>По данным "Хабр Карьеры"<a>за первое полугодие 2023 года</a>, медианная зарплата фронтендера в России - 180 000 рублей. Но это только для российских компаний. Чтобы получить более полную картину, мы собрали данные HeadHunter, Stack Overflow, Indeed и других порталов и составили таблицу зарплат фронтендеров по странам и грейдам.</p>
64
Грейд Навыки Зарплата в России (в рублях) Зарплата в Германии (в евро) Зарплата в США (в долларах) Junior HTML, CSS, JavaScript, знание одного фреймворка (например, React, Angular или Vue.js) 30 000- 150 000 3600-7000 4300-7100 Middle Углублённое знание JavaScript и фреймворков, опыт работы с REST API, базовые знания веб-дизайна 90 000- 340 000 4200-11 500 4700-13 000 Senior Опыт работы с большими проектами, знание архитектуры приложений, углублённое знание веб-перформанса 150 000- 400 000 4500-14 000 8700-16 000 Lead Руководство командой разработчиков, опыт разработки сложных приложений, знание DevOps 400 000-450 000 7000-16 500 9000-20 000<p>Это примерное распределение доходов в зависимости от грейда и страны. Если хотите более глубоко изучить взаимосвязь денег и скиллов во фронтенде, читайте наш подробный материал<a>о зарплатах фронтенд-разработчиков</a>.</p>
64
Грейд Навыки Зарплата в России (в рублях) Зарплата в Германии (в евро) Зарплата в США (в долларах) Junior HTML, CSS, JavaScript, знание одного фреймворка (например, React, Angular или Vue.js) 30 000- 150 000 3600-7000 4300-7100 Middle Углублённое знание JavaScript и фреймворков, опыт работы с REST API, базовые знания веб-дизайна 90 000- 340 000 4200-11 500 4700-13 000 Senior Опыт работы с большими проектами, знание архитектуры приложений, углублённое знание веб-перформанса 150 000- 400 000 4500-14 000 8700-16 000 Lead Руководство командой разработчиков, опыт разработки сложных приложений, знание DevOps 400 000-450 000 7000-16 500 9000-20 000<p>Это примерное распределение доходов в зависимости от грейда и страны. Если хотите более глубоко изучить взаимосвязь денег и скиллов во фронтенде, читайте наш подробный материал<a>о зарплатах фронтенд-разработчиков</a>.</p>
65
<p>Всего в начале года на hh.ru было больше 3000 вакансий фронтенд-разработчиков.</p>
65
<p>Всего в начале года на hh.ru было больше 3000 вакансий фронтенд-разработчиков.</p>
66
<p>Начиная с 2020-го конкуренция среди джунов во фронтенде усилилась - но, если пройти отбор и получить заветный оффер, можно рассчитывать на зарплату от 80 тысяч рублей. Вакансии для новичков предлагают<a>Nice’n’Easy</a>(СПб),<a>amoCRM</a>(Москва),<a>Recode</a>(Тольятти). Есть и предложения для стажёров: совсем зелёных фронтендеров сейчас ищут<a>iTechArt</a>(Минск),<a>Vention</a>(Ташкент), "<a>Экопси</a>" (Москва).</p>
66
<p>Начиная с 2020-го конкуренция среди джунов во фронтенде усилилась - но, если пройти отбор и получить заветный оффер, можно рассчитывать на зарплату от 80 тысяч рублей. Вакансии для новичков предлагают<a>Nice’n’Easy</a>(СПб),<a>amoCRM</a>(Москва),<a>Recode</a>(Тольятти). Есть и предложения для стажёров: совсем зелёных фронтендеров сейчас ищут<a>iTechArt</a>(Минск),<a>Vention</a>(Ташкент), "<a>Экопси</a>" (Москва).</p>
67
<p>Безусловно, самые высокие зарплаты - в Санкт-Петербурге и в Москве. Но и в регионах оклады вполне приличные, особенно учитывая разницу в стоимости аренды в сравнении со столицей. Ориентировочная разница между региональными и московскими зарплатами - 30-40%.</p>
67
<p>Безусловно, самые высокие зарплаты - в Санкт-Петербурге и в Москве. Но и в регионах оклады вполне приличные, особенно учитывая разницу в стоимости аренды в сравнении со столицей. Ориентировочная разница между региональными и московскими зарплатами - 30-40%.</p>
68
<em>Скриншот: HeadHunter / Skillbox Media</em><p>Вот так выглядят вакансии на hh.ru. Как правило, чем более опытный программист требуется, тем уже должна быть специализация. Если уметь всё понемногу, подойти под требования работодателей трудно.</p>
68
<em>Скриншот: HeadHunter / Skillbox Media</em><p>Вот так выглядят вакансии на hh.ru. Как правило, чем более опытный программист требуется, тем уже должна быть специализация. Если уметь всё понемногу, подойти под требования работодателей трудно.</p>
69
<p>Научиться делать сайты можно по-разному. По большому счёту вариантов три: научиться самому, получить профильное образование или пройти курс.</p>
69
<p>Научиться делать сайты можно по-разному. По большому счёту вариантов три: научиться самому, получить профильное образование или пройти курс.</p>
70
<p>Если вы выбрали путь самообучения, то вот пара советов. Во-первых, гуглить, гуглить и ещё раз гуглить. Задавайте вопросы, ищите ответы на форумах и специализированных сайтах. Во-вторых, не бойтесь трудностей и не сдавайтесь, если что-то не получается с первой, второй или даже десятой попытки, - упорство и дисциплина помогут во всём. В-третьих, учите английский. Англоязычных материалов по разработке гораздо больше, и зачастую они более актуальны, да и мировой рынок труда станет доступнее.</p>
70
<p>Если вы выбрали путь самообучения, то вот пара советов. Во-первых, гуглить, гуглить и ещё раз гуглить. Задавайте вопросы, ищите ответы на форумах и специализированных сайтах. Во-вторых, не бойтесь трудностей и не сдавайтесь, если что-то не получается с первой, второй или даже десятой попытки, - упорство и дисциплина помогут во всём. В-третьих, учите английский. Англоязычных материалов по разработке гораздо больше, и зачастую они более актуальны, да и мировой рынок труда станет доступнее.</p>
71
<p>Если вы хотите окунуться в студенческую жизнь и получить подтверждение своим навыкам в виде диплома, то ищите вуз с программами "Разработка ПО", "Прикладная информатика" или "Прикладное программирование". Там вы изучите информатику, математику, языки программирования, а заодно физику с радиоэлектроникой - будет задел на будущее, если вдруг надоест красить кнопки :)</p>
71
<p>Если вы хотите окунуться в студенческую жизнь и получить подтверждение своим навыкам в виде диплома, то ищите вуз с программами "Разработка ПО", "Прикладная информатика" или "Прикладное программирование". Там вы изучите информатику, математику, языки программирования, а заодно физику с радиоэлектроникой - будет задел на будущее, если вдруг надоест красить кнопки :)</p>
72
<p>Если вы собираетесь выбрать платный курс, советуем вам программу Skillbox "<a>Профессия Фронтенд-разработчик</a>". Программу курса составили с учётом требований работодателей в 2024 году.</p>
72
<p>Если вы собираетесь выбрать платный курс, советуем вам программу Skillbox "<a>Профессия Фронтенд-разработчик</a>". Программу курса составили с учётом требований работодателей в 2024 году.</p>
73
<a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>
73
<a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>