Что должен уметь верстальщик

Подойдет ли вам эта профессия

Освоив профессию, вы сможете:

• работать из дома по удобному графику;
• зарабатывать до 100 000 рублей в месяц;
• подучиться и стать программистом с еще большим заработком;
• постоянно развивать творческие способности.

Спрос на верстальщиков сейчас хороший, поэтому найти работу будет легко.

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

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

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

Необходимые навыки и качества

Специалист по верстке должен обладать следующими навыками:

• язык разметки HTML;
• знание PHP, MySQL;
• знание Adobe Illustrator, CorelDraw;
• оптимизация под поисковые системы;
• умение работать с CMS и ее API;
• знание основы AJAX, jQuery, JavaScript;
• семантическая верстка, умение располагать фрагменты кода на странице, правильное заполнение  SEO-тегов title, description,
• знание Firefox-плагинов CSS-процессоров.

Из обязательных личных качеств, которыми должен обладать специалист по верстке, работодатели выделяют следующие:

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

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

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

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

Поэтому нужно уметь объяснить заказчику понятным языком, что в итоге получится у вас с проектом, и понять всего его требования.

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

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

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

Исчезнет ли профессия в будущем

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

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

Имейте в виду, что знать только HTML и CSS невыгодно. Простую верстку можно сделать в конструкторе сайтов вроде Тильды без специалиста. Советую дополнительно освоить jQuery, если хотите быть востребованным.

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

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

Отличия от frontend-разработчика

Верстальщика часто путают с frontend-разработчиком, что не удивительно. Это произошло из-за хитрых заказчиков, которые хотят получить и программиста, и верстальщика за одну копейку.

В отличие от верстальщика frontend-разработчик не только переводит макет на понятный язык для браузера, но еще и добавляет интерактивные элементы. Он знает JavaScript, AJAX, CORS, PHP, создает и адаптирует чат-ботов, формы заказов и другие технические элементы, которые верстальщики не умеют делать. Frontend-разработчика можно сравнить с начинающим программистом.

Подробнее о том, кто такой frontend-разработчик и как им стать, вы можете узнать из нашего обзора.

Как составить резюме

Если у вас нет опыта работы верстальщиком, обязательно напишите об этом в резюме. Не стоит приукрашивать его несуществующими заслугами. Лучше подробнее опишите свои персональные навыки: владеете ли ПК на уровне опытного пользователя, умеете ли работать с дизайнерскими программами (Photoshop, Illustrator и другие). Также укажите, что разбираетесь в верстке шаблонов HTML, владеете базовыми знаниями по 3Ds Max и Corel Bryce, имеете понимание, как работают интерактивные сайты.

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

Рекомендую составлять резюме по следующему плану:

• ФИО, контактная информация;
• ссылки на сайты компаний, в которых вы работали;
• перечень обязанностей, которые вы выполняли;
• профессиональные достижения;
• ключевые навыки;
• профильное обучение (например, вы закончили курсы по верстке сайтов и можете подтвердить это сертификатом или дипломом).

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

• быстрая обучаемость;
• усидчивость;
• стрессоустойчивость;
• коммуникабельность;
• ответственность;
• исполнительность;
• внимательность;
• пунктуальность.

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

Суть деятельности

Верстка – создание структуры HTML-кода, отвечающего за расположение составных элементов на веб-страницах. Процесс происходит на основании разработанного макета.

Верстка сайта состоит из 6 этапов.

1. Тщательное изучение технического задания.
2. Разработка дизайна.
3. Создание макета.
4. Подбор рисунков и графических объектов.
5. Установка шаблона.
6. Корректировка при наличии замечаний.

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

Рекомендую вам посмотреть видео, в котором верстальщик с 10-летним опытом рассказывает о том, что такое верстка, как работает сайт, что такое HTML и прочее.

Что вы должны знать для начала

На уровень профессионализма и доход влияет количество и качество выполняемой работы. Верстальщик проходит 3 стадии развития.

Junior

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

Что должен уметь junior:

1. Подбирать нужный тег.
2. Писать код на HTML.
3. Вставлять сторонние виджеты.
4. Подбирать подходящий формат картинки.
5. Пользоваться CSS (знать шрифты, цвета, блоки, позиционирование).
6. Использовать Git и Stash.

На этом этапе необходимо собрать портфолио из 7–10 работ.

Middle

Такой специалист работает в одиночку над малыми и средними проектами. Может грамотно сверстать многостраничник. Умеет изменять и создавать шаблоны. Знает, что такое грид-система и CSS-фреймворк. Способен извлекать подробную информацию из макета. Может создать свою небольшую команду, разделить верстку на мини-задания для помощников. За плечами у него должно быть не менее 50 завершенных проектов.

Senior

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

Что делает и знает верстальщик уровня senior:

1. PHP.
2. Мобильную верстку.
3. Flexbox.
4. Пишет шаблоны хотя бы для одной CMS.
5. Разбирается в графических редакторах на базовом уровне.
6. Фреймворк Node.js.
7. Азы SEO.
8. Кроссбраузерную и кроссплатформенную верстку.
9. Также желательно знать и jQuery.

Верстальщический вундерлист

Умение использовать каждую вещь из этого списка немножечко повышает шансы верстальщика найти работу в 2020 году.

Кроссбраузерная вёрстка — это когда сайт во всех браузерах выглядит одинаково. Даже в IE11 (хотя это несколько сложно, учитывая одно из следующих требований).

• SVG — векторный формат изображений, при котором картинки не портятся, если их растянуть.
• Sass — это такая надстройка над CSS. Sass помогает избежать дублирования и структурировать код, в таком виде его легче поддерживать. Но с препроцессорами есть проблемы.
• БЭМ — изобретение Яндекса, чтобы упростить вёрстку и разбить всё на блоки.
• Canvas— сущность в HTML, на которой можно рисовать (люблю объяснять!).
• PUG — шаблонизатор HTML, написанный на JavaScript для Node.js. Нужен, чтобы шаблонизировать. Все же любят шаблоны.
• Git — система контроля версий, чтобы не делать . Мы в Академии любим Git и написали про него много статей.
• Натянуть вёрстку на CMS — взять WordPress или какой-нибудь там ещё движок для блога и сверстать страницу его встроенными средствами. Но по макету, чтобы дорого-богато.
• Bootstrap — ещё одна библиотека, чтобы быстро верстать. Её много где используют, но киллерфичей верстальщика может стать понимание, как сверстать «как на бутстрапе», но с нуля.
• jQuery — популярное нечто решение, которое используют, чтобы поудобнее работать с JavaScript. Порог вхождения низкий, запутанность кода — высокая. Вообще, после хороших курсов по JavaScript никакой jQuery будет не нужен, но если он используется в компании, то разобраться будет легко.
• Node.js, npm-скрипты, Autoprefixer, Gulp, Webpack — инструменты, чтобы экономить кучу времени при вёрстке за счёт автоматизации.

Сколько зарабатывает верстальщик

В офисе вы будете стабильно получать зарплату вне зависимости от того, сколько сделали. По данным сайта trud.com, профессионалы в среднем получают 43 000 руб., а в Москве даже немножко больше – 53 000 руб.

Если такие зарплаты не устраивают, то есть выход. Например, можно податься на зарубежные сайты фриланса или стать программистом Java с доходом более 140 000 рублей в месяц.

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

Еще я выяснила, сколько получает хороший верстальщик на удаленке:

• корректировка одностраничника на Тильде – 1 500 руб.;
• скопировать сайт на 1С-Битрикс – 34 000 руб.;
• исправить небольшой баг на странице – 500 руб.;
• добавить кнопку “Купить” – 500 руб.;
• настроить оформление электронного письма – 2 170 руб.;
• правка верстки на WordPress – 2 000 руб.;
• верстка многостраничного сайта – 7 000 руб. и выше.

Увы, статистика ru.indeed.com говорит, что доход начинающего специалиста без портфолио колеблется в пределах 7 500 рублей. Но приблизительно за 3 года можно дорасти до специалиста с окладом 90 000 руб. в месяц.

Верстальщик – кто это и чем занимается

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

К преимуществам профессии можно отнести:

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

Зарплата верстальщика зависит от уровня владения HTML и CSS, опыта, дополнительных навыков, владения английским языком.

Где начать обучение верстке и сколько это стоит

Верстальщик – не самая сложная профессия в IT-сфере, поэтому ее легко можно освоить самостоятельно. Такая специальность идеально подойдет для тех, кто хочет работать удаленно, однако при официальном трудоустройстве работодатель может потребовать соответствующий диплом.

Чтобы стать профессиональным верстальщиком, вы можете закончить такие онлайн-курсы:

1. “Я – Веб-разработчик – PRO” от Skillbox. Длительность обучения – 2 года. Формат: вебинары, видеоуроки с домашними заданиями. По окончании курса гарантировано трудоустройство. Стоимость обучения ежемесячно составляет 6 900 рублей (первые полгода оплачивать не надо).
2. “Frontend-разработчик с нуля” от Нетологии. Обучение рассчитано на 10 месяцев. Вы получаете доступ к видеоурокам. Также вы выполняете проекты, которыми сможете пополнить портфолио. Ежемесячно за обучение необходимо платить 6 600 рублей.
3. “Как создать сайт самостоятельно” от TexTerra – курс включает 13 лекций с домашними заданиями. Длительность обучения – 2 месяца. Стоимость составляет 10 000 рублей.
4. “Профессия Frontend-разработчик” от GeekBrains и Mail.ru Group. Работа с лучшими преподавателями, самостоятельное изучение материала и взаимодействие с наставниками из числа самых успешных выпускников прошлых потоков. Длительность обучения – 7 месяцев. Стоимость – 7 141 рублей в месяц.

Также научиться верстать сайты можно абсолютно бесплатно, пройдя следующие курсы:

1. “HTML/CSS” от Beonmax. Вам будет предоставлен доступ к видеоурокам с домашними заданиями и интерактивными упражнениями. Длительность обучения 5 часов (31 видеоурок).
2. Обучение верстке от HTML Academy. Вы будете проходить интерактивные уроки с домашними заданиями. Длительность обучения зависит исключительно от вашей скорости усвоения учебного материала и мотивации.
3. “Основы HTML и CSS” от Нетологии. Обучение проходит в формате онлайн-вебинаров 2 раза в неделю. Длительность – 2 недели.
4. Эффективное обучение HTML для новичков от Евгения Попова. Курс включает 33 видеоурока.
5. “HTML и CSS” от PHP-School. Вам необходимо пройти 11 уроков и выполнить домашние задания. Обучение длится 20 часов.

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

Идеальная вакансия

Коля Шабалин, автор и преподаватель курсов в Академии, написал скрипт и проанализировал вакансии на hh и Хабр-карьере, выделил требования и посчитал, какие встречаются чаще. Оказалось, что усреднённая вакансия выглядела бы как-то так:

Требуется верстальщик, который:

• Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
• Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
• Знает HTML. В своей работе использует Сanvas. Шаблонизирует HTML с помощью PUG.
• Использует Git. Умеет работать в GitHub.
• Может натянуть вёрстку на CMS: Bitrix и Wordpress.
• JavaScript пишет с помощью jQuery, но не чурается ES6.
• Умеет автоматизировать свою работу с Node.js, npm-скрипты, Autoprefixer, Gulp или Webрасk.
• Уверенно владеет Photoshop и Illustrator или знает Figma или Sketch.
• Имеет своё портфолио, инициативный, готов пройти испытательный срок

Уроками информатики, как видите, даже не пахнет. Много непонятных слов, давайте разберёмся.

Обязанности верстальщика

В круг обязанностей верстальщика входят следующие задачи.

1. Создание шаблонов на основе имеющихся psd-макетов.
2. Интеграция шаблонов на систему управления.
3. Верстка промо-страниц и email-рассылок.
4. Написание кодов на языке JavaScript и AJAX.
5. Создание принт-версий страниц.

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

Приведу должностные обязанности дизайнера-верстальщика.

1. Компьютерная верстка полиграфической продукции (визитные карточки, буклеты, каталоги, календари и другое).
2. Верстка таблиц и графических элементов.
3. Внесение правок в текст.
4. Допечатная подготовка макета.
5. Обработка изображений.
6. Создание эскизов и выполнение работ по художественному оформлению обложек печатной продукции.

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