Что нужно уметь верстальщику
- 8 июня 2023
В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.
Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css
на десять тысяч строк.
Сейчас же грань размылась — теперь нет разработчиков на React, которые не понимают, как сверстать макет и обвязать всё стилями. При этом спрос на чистых верстальщиков ещё остался — им не обязательно в совершенстве владеть JavaScript, а вот глубоко понимать, как быстро, точно и качественно из макета сделать страницу — обязательно.
В этом и заключается суть работы верстальщиков. Они берут у дизайнеров макет (это картинка, на которой нарисован сайт — К.О.) и собирают из него страницу. Пишут HTML, CSS, используют магию гридов, флексов, какой-нибудь БЭМ. Стараются, в общем, делают. Молодцы.
С другой стороны, HTML сейчас даже в некоторых школах изучают — но отчего-то сразу после школы никто не спешит платить первокурсникам по 500$ за вёрстку. И тут мы приходим к тому, что в 2023 году требуют от верстальщика работодатели.
Мы в HTML Academy работаем над тем, чтобы верстальщики после двух наших интенсивов по вёрстке находили работу, а после интенсива по JavaScript делали это вообще без проблем. И для того, чтобы чему-то обучать, мы должны понять, что требуется рынку сейчас и какие требования выставляет работодатель к верстальщику, чтобы мы могли покрывать такие требования на курсах.
Идеальная вакансия
Коля Шабалин, автор и преподаватель курсов в Академии, написал скрипт и проанализировал вакансии на hh и Хабр-карьере, выделил требования и посчитал, какие встречаются чаще. Оказалось, что усреднённая вакансия выглядела бы как-то так:
Требуется верстальщик, который:
- Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
- Идеально знает CSS. Использует препроцессор Sass. Знает флексы и гриды. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
- Знает HTML. В своей работе использует Сanvas. Шаблонизирует HTML с помощью PUG.
- Использует Git. Умеет работать в GitHub.
- Может натянуть вёрстку на CMS: Bitrix и Wordpress.
- JavaScript пишет с помощью фреймворков — React, Angular, Vue.
- Умеет автоматизировать свою работу с Node.js, npm-скрипты, Autoprefixer, Gulp или Webрасk.
- Уверенно владеет Figma, Photoshop и Illustrator или знает Sketch.
- Имеет своё портфолио, инициативный, готов пройти испытательный срок.
Уроками информатики, как видите, даже не пахнет. Много непонятных слов, давайте разберёмся.
Инструменты верстальщика
Умение использовать каждую вещь из этого списка немножечко повышает шансы верстальщика найти работу в 2023 году.
Кроссбраузерная вёрстка — это когда сайт во всех браузерах выглядит одинаково.
- SVG — векторный формат изображений, при котором картинки не портятся, если их растянуть.
- Sass — это такая надстройка над CSS. Sass помогает избежать дублирования и структурировать код, в таком виде его легче поддерживать. Но с препроцессорами есть проблемы.
- БЭМ — изобретение Яндекса, чтобы упростить вёрстку и разбить всё на блоки.
- Canvas — сущность в HTML, на которой можно рисовать (люблю объяснять!).
- PUG — шаблонизатор HTML, написанный на JavaScript для Node.js. Нужен, чтобы шаблонизировать. Все же любят шаблоны.
- Git — система контроля версий, чтобы не делать
Макет_2_Финальный_СПравками_final_наревью.html
. Мы в Академии любим Git и написали про него много статей. - Натянуть вёрстку на CMS — взять Wordpress или какой-нибудь там ещё движок для блога и сверстать страницу его встроенными средствами. Но по макету, чтобы дорого-богато.
- Bootstrap — ещё одна библиотека, чтобы быстро верстать. Её много где используют, но киллерфичей верстальщика может стать понимание, как сверстать «как на бутстрапе», но с нуля.
- Node.js, npm-скрипты, Autoprefixer, Gulp, Webpack — инструменты, чтобы экономить кучу времени при вёрстке за счёт автоматизации.
Что там с Фотошопом и Иллюстратором
Практика показывает, что все переходят на Figma. Ну то есть Фотошоп и Иллюстратор ещё можно где-то встретить, но по сравнению с Фигмой это как заколачивать гвозди дорогущим перегруженным графическим редактором по подписке.
Ну и потом, вспомните Adobe Flash — все постепенно пересядут на нормальную технологию, никуда не денешься.
А портфолио откуда брать?
- Найти бесплатных макетов и наверстать.
- Придумать самому, если есть Дизайнерская Жилка.
- Пройти полноценную подготовку к работе и получить пару проектов в портфолио.
Что об этом всём думают в индустрии?
Я спросил Катю, которая раньше верстала в Яндекс.Деньгах, о том, что должен уметь верстальщик, чтобы его все хотели. Катя отвечает:
По опыту: нужно точно, быстро и адаптивно.
Точно — значит по макету: надо уметь его открыть и померить отступы. Быстро — значит код легко изменять и его можно переиспользовать: надо знать препроцессоры и уметь правильно разделить макеты на компоненты (приходит с опытом). Адаптивно то и значит: надо знать про медиа-запросы и уметь нафлексить флексами резиновую вёрстку, или на гридах.
Чтобы собрать своё добро, нужно знать, где скачать Node.js, как скачать пакет из npm и уметь пользоваться Webpack или Gulp (если он ещё не умер): пожать, минифицировать, запустить хот-релоад. И да, Git, нужно выучить десяток базовых команд. Это необходимый минимум.
В идеале нужно освоить базовый JavaScript и React, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер.
Нынче если ищут именно верстальщика, а не полноценного фронта, значит последний уже есть, а вёрстки много и/или она сложная. Значит можно не знать JavaScript, но стоит освоить любой шаблонизатор, одну из популярных методологий, познакомиться с существующими библиотеками компонентов.
Чтобы тебя все хотели, нужно много и быстро верстать. А для этого нужно активно пользоваться доступными инструментами и подходами и уметь выбирать подходящие. Что, конечно, выходит далеко за рамки знания HTML и CSS.
— Катя Иванова, перевела бабушку на React
Что ещё?
Все работодатели хотят, чтобы к ним пришёл опытный верстальщик — для этого берите и верстайте. Можно смотреть на популярные сайты, верстать по бесплатным макетам или хорошим курсам. Как определить, хорошие ли перед вами курсы, я рассказывал в статье «Как получать 100 тысяч за код». Там есть полный список вещей, которые хорошо бы знать веб-разработчику, чтобы повысить шансы на высокую зарплату.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

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

8 шагов, чтобы получать 200 тысяч за код
Сохраните в закладки сейчас, скажете спасибо через год. Сначала шаги, в конце каждого этапа — ссылки для внеклассного чтения.
- 12 июня 2023

Веб-разработка. С чего начать
На старте бывает непонятно, какой язык программирования выбрать первым. На самом деле, нет идеального языка, который раз и навсегда определит вашу карьеру. Освоить новый язык программирования — всё равно что выучить ещё один иностранный. Сначала надо определиться, что вам больше подходит: фронтенд или бэкенд.
- 2 июня 2023

Как оформить профиль в LinkedIn
Если вы заинтересованы в том, чтобы найти работу в зарубежных компаниях, отслеживать их активность и вакансии, создавать и развивать нетворкинг, следить за профилями своих коллег, то во всём этом поможет LinkedIn.
Нетворкинг — это приобретение полезных знакомств в профессиональной сфере. Чем больше у вас таких знакомств, тем больше шансов на успех в карьере.
LinkedIn — это социальная сеть, нацеленная на приобретение профессиональных контактов. Здесь пользователь составляет свой профессиональный профиль, ищет новую работу или интересные партнёрства, налаживает нетворкинг и просто общается.
В LinkedIn зарегистрированы больше 875 миллионов человек и 58 миллионов компаний. Каждую минуту на этой площадке трудоустраивается 8 человек. Предложения для работы есть для каждого специалиста: фронтенд-, бэкенд- или фуллстек-разработчика.
На LinkedIn ваш профиль и есть ваше резюме. Прежде чем отправлять свой отклик, нужно оформить профиль. В статье мы подробно расскажем, как это сделать правильно и получить приглашение на интервью.
- 15 февраля 2023

Как попасть в компанию мечты, если там закрыты все вакансии. Советует HR
Если вы мечтаете работать в определённой компании, но не нашли вакансий на сайтах по поиску работы — ещё не всё потеряно. Проверьте объявления на других площадках. Если и там ничего нет, воспользуйтесь «обходными путями»: начните со стажировки или познакомьтесь с рекрутёром.
- 14 февраля 2023

Что почитать начинающему разработчику
Книга — источник знаний. Можно погрузиться в новый язык программирования, изучить фреймворк, получить ответ на интересующий вопрос и много другое. Мы собрали подборку книг, которая поможет понять, как попасть в мир IT, развиваться в карьере и чего ждать от профессии.
- 9 февраля 2023

Работа в удовольствие: как электронщик ушёл в айти и не жалеет об этом
Как работать в удовольствие
История Алексея Груднова.
Мне было 23 года, когда я окончил университет и устроился на работу не по специальности в местную компанию. Там было направление, связанное с радиосвязью и научным исследованием, поэтому студента с образованием электронщика взяли как программиста в среде Matlab. Проработал год и понял, что это не моё. Специальность, полученная в вузе, совершенно не нравилась. Мне всегда нравилось программирование и я решил целенаправленно взяться за обучение.
Обучение
На Академию наткнулся случайно, просматривая очередной ролик на ютубе. Там упоминали фронтенд, как направление и рекламу курсов. Сначала отнёсся скептически, потому что уже тогда в интернете было миллион курсов, а отношение в принципе к этому явлению было негативное.
Но по воле случая зашёл на сайт Академии. Прошёл пару бесплатных тренажёров и меня увлекло. Понял, что обучаться самостоятельно будет нереально — всё будет отвлекать, запала и мотивации на самообучение хватит на месяц-два. Поэтому решил, что самым верным способом обучиться будет купить полноценную профессию в рассрочку, чтобы ежемесячный платёж постоянно мотивировал обучаться дальше.
Параллельно с обучением работал 5/2 с девяти до шести и обучался в магистратуре. Свободного времени практически не оставалось, но делал этот выбор осознанно.
Так и попал во фронтенд. Прошёл профессию «Фронтенд-разработчик», затем решил купить отдельно курс по React.js, потому что целью было как можно быстрее устроиться на работу. Работу JavaScript-разработчиком не найти, а чисто верстальщиком быть не хотел, поэтому курс по React, что называется, мастхэв. Написал менеджеру из Академии, что «Акселератор» и стажировка пусть подождут два месяца, а я пойду учить React.
В целом давалось легко, практически не дёргал наставника. Хватало тех знаний, что давали на лекциях и дополнительных материалах к каждому уроку. Наставники — важный этап обучения, но для себя решил, что нужно максимально прокачиваться в самообучении.
После курса по React оповестил менеджера из Академии, что могу теперь вернуться к стажировке, а пока сам начал искать вакансии.
Трудоустройство
С момента, как я попал в Академию, прошло девять месяцев. На месяц выпал из обучения, потому что писал диплом для магистратуры. Затем начал изучать рынок вакансий.
В моём городе нормальных вакансий во фронтенде не было от слова совсем, поэтому искал вакансии только с удалёнкой.
Составил резюме, указав ключевые навыки, полученные в рамках обучения, прикрепил ссылки на Git самых удачных проектов и начал откликаться на все вакансии где был React. Параллельно продолжал работать на своей основной работе.
Тщательно выбирал вакансии, поскольку не хотел устроиться куда попало. В качестве платформы: hh.ru и «Центр карьеры» от Академии. Как показала практика, самые крутые вакансии для новичков были в «Центре карьеры».
Спустя месяц поиска наткнулся на вакансию от Thmoon.ru. Это небольшая команда, занимающаяся аутсорсом на полной удалёнке. Было два собеседования: первое с руководителем в формате общения, второе — лайвкодинг с решением трёх небольших задачек. С собеседованием справился хорошо и мне сделали оффер. На следующий день написал заявление на увольнение с основного места работы.
Настоящее время
Уже около года работаю у ребят из Thmoon. За это время сильно прокачался как разработчик, поработал в разных командах на крупных проектах. Скажу честно, первый месяц был довольно сложным в плане вхождения в процессы коммерческой разработки. Главное в этот момент не опускать руки и продолжать учиться.
Мой стек: TypeScript, React, Redux Toolkit. Также успел поработать с бекендом (Node.js), веб-сокетами. Очень доволен работой и командой. Аутсорс позволяет изучать кучу технологий, поработать на нескольких проектах, набраться опыта. Считаю, что на начальном этапе для разработчика это главное.
Очень доволен тем, что выбрал именно Академию и курсы, как способ обучаться. Это было одно из самых верных решений в жизни, которое позволило найти любимую работу и сферу деятельности. Своим друзьям, которые тоже хотят обучаться фронтенду, непременно рекомендую именно Академию, как площадку для старта.
Больше статей про выпускников
- 3 февраля 2023

Хочу работать в IT, но…
Изучать что-то новое всегда — волнительное и завораживающее событие. Но некоторые останавливаются, даже не начав. Почему так происходит? По разным причинам, но бывают случаи, что из-за мыслей «ещё рано», «уже поздно», «нет технического образования», «не знаю английский». Мы покажем на примерах, что возраст, наличие образования и знание английского — не проблема для смены профессии.
- 19 января 2023

Как стать фулстек-разработчиком
В отличие от фронтендеров и бэкендеров, фулстек-разработчик способен полностью самостоятельно создать сайт или приложение. Такой специалист отлично разбирается в технологиях, базах данных, серверах, умеет разрабатывать веб-приложения и сайты, знает как фронтенд, так и бэкенд. Давайте узнаем, в чём преимущества профессии, насколько она востребована на рынке и как стать топовым специалистом.
Фулстек-разработчик сочетает несколько направлений и может заменить собой пару более узких специалистов. Главная его особенность — это универсальность. Именно поэтому спрос на таких специалистов всегда есть и постоянно растёт. Многим компаниям выгоднее нанять одного универсального разработчика, чем содержать штат программистов.
Топовых фулстек-разработчиков очень мало, они востребованы и имеют возможность выбирать из ряда предложений то, что им интересно. Джуны с небольшим опытом в сфере фулстек-разработки могут рассчитывать на зарплату от 30 до 100 000 ₽ в месяц. Опытный разработчик получает в среднем вдвое больше — 120—200 000 ₽.
💡 Что должен уметь топовый фулстек-разработчик:
Понимать полный цикл процесса разработки.
Уверенно знать современный JavaScript (ECMAScript), применять TypeScript.
Строить архитектуру клиентских и серверных приложений.
Применять ООП и паттерны проектирования на практике.
Проектировать и разрабатывать REST API.
Проводить автоматизированное тестирование фронтенда и бэкенда.
Работать с базами данных.
Зарплаты фулстек-направления
Исследования компании Хабр Карьеры за 2022 год говорят, что средняя зарплата разработчиков в России составляет 140 000 ₽. Сумма немного различается по регионам. В Москве зарплата подросла за год и составляет 180 000 ₽, в Санкт-Петербурге осталась на уровне начала года — 150 000.
Зарплата фулстек-разработчика в среднем составляет 200 000 ₽ в Москве, 160 000 ₽ в Санкт-Петербурге и 130 000 ₽ в регионах.
Этот анализ зарплат составлен по вакансиям сайта hh.ru.
Также специальность фулстек ценится за границей, зарплаты в Европе и в Америке очень достойные. В Нью-Йорке опытный фулстек зарабатывает 3000—3500 $. В Германии работодатели указывают в вакансиях зарплату 2500—4000 $.
Изучив вакансии и уровень дохода, скорее хочется прокачать навыки и стать фулстек-разработчиком. Что же для этого нужно?
- 20 декабря 2022

Как написать хорошее сопроводительное письмо
Вот вы нашли подходящую вакансию и уже готовы откликнуться — осталось только написать сопроводительное письмо. Оно дополнит резюме и поможет вам выделиться среди остальных кандидатов.
- 14 декабря 2022