Сколько учиться на верстальщика

6

Профессия «HTML-верстальщик» — подробный разбор

Рассмотрим профессию HTML-верстальщика. Определим: кто это такой; что входит в его обязанности; выясним, что нужно знать, чтобы занимать такую должность.

Приступим к разбору.

Кто такой Веб-верстальщик

Ваши верные спутники на первые 6 месяцев (взято с сайта с design2cms.net)

Для общего понимания – разработка сайта состоит из трех основных этапов:

1. Создание дизайна. Дизайнер рисует общий вид сайта, определяет цвета оформления, размещение блоков, размеры объектов.
2. Программирование. Backend-программист работает над внутренней составляющей сайта, он отвечает за серверную часть WEB-сайта.
3. Верстка. Это как раз то, что нас сейчас интересует. Верстальщик отвечает за этап создания визуальной части сайта: он переводит дизайн-макет в WEB-форму, делает дизайн функциональным, заставляет все работать.

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

Рекомендую посмотреть подборку специализированных программ: обзор топовых курсов по web-верстке

Востребованность профессии верстальщика сайтов

Растет зарплата, а значит растет и спрос (взято с сайта proprof.ru)

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

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

Кроме того, расширяя свои навыки вы сможете быстро перейти в высшую лигу Frontend-разработки, но это уже совсем другая история.

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

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

• язык разметки. HTML, HTML5, дополнительно желательно знать HTML-фреймворки: Twitter Bootstrap или Semantic UI;
• CSS (каскадную таблицу стилей). При помощи нее задается стилистика страниц;
• основы JavaScript, jQuery. При помощи них задается динамика;
• основы PHP;
• принципы работы визуальных редакторов;
• инструменты проверки правильности, валидности кода.

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

Важно: нельзя путать понятие верстальщика и Frontend-разработчика.

Часто в вакансиях на должность верстальщика «светятся» требования, которые нельзя относить к этой должности. Пример: доскональное знание JavaScript. Верстальщик должен знать, как это работает, но максимум его компетенции распространяется на знание типовых решений, которые позволят решить простые задачи, заложенные в макете. Тогда как Frontend-разработчик должен глубоко знать JavaScript, включая фреймворки, а также ему присущи навыки, которые позволяют расширять их возможности.

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

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

Вам нужно знать некоторые из них, но в перспективе — это все ваше.

Для работы верстальщиком вам нужен компьютер со всем необходимым обеспечением.

Писать код можно и в Notepad, но это неудобно. Для верстальщиков и программистов придуманы специальные программы: редакторы кода. Вот некоторые из них: Visual Studio Code, Sublime Text, Atom, Vim и другие. Установите что-то из перечисленного, это упростит и ускорит вашу работу.

Также must have для начинающего верстальщика – Photoshop, Figma или Avacode – для разбора дизайн-макета на части.

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

Что делает и чем занимается верстальщик

HTML-верстальщик имеет следующие обязанности и занимается задачами по:

• верстке страниц сайта и веб-приложений на основе psd-макетов под десктоп и мобильные устройства;
• верстке писем e-mail рассылок, промо-страниц и Landing Page;
• интеграции верстки в различные CMS: например, WordPress, Joomla, MODx;
• выполняет доработки страниц под SEO-требования: ускоряет загрузку HTML и CSS кода.

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

Плюсы и минусы профессии верстальщика: почему стоит осваивать верстку

Главные преимущества выбора этой профессии:

• быстрое освоение: при должном рвении, верстальщиком можно стать через 2 месяца, а через полгода занять должность Junior-Frontend-разработчика;
• возможность самостоятельного обучения;
• необходимость постоянного развития. Разработка – сфера изменений, она всегда динамична, чтобы оставаться в тренде, нужно будет развиваться на постоянной основе;
• нечеткие границы между профессиями верстальщика, веб-дизайнера, Frontend-разработчика. Это одновременно и минус, но если смотреть с положительной точки зрения, то для вас открываются возможность занять смежную дисциплину, например, дизайнера-верстальщика или Frontend-разработчика с более широкими возможностями для карьерного роста;
• возможность удаленной занятости.

Говоря о недостатках, можно вспомнить только один – в работе верстальщика встречаются рутинные задачи: придется часто повторять, по сути, одни и те же действия. Однако этот минус характерен практически для всех профессий, поэтому можно сказать, что недостатков нет.

Зарплаты верстальщиков: от Junior до профи

Заработная плата специалистов сильно варьируется. Сколько зарабатывает верстальщик зависит от: пула задач, которые возлагаются на специалиста, его опыта, региона проживания, специфики работы компании.

• зарплата по России: 20-80 тыс. рублей;
• зарплата в Москве: 40-120 тыс. рублей.

40 000 – это средняя зарплата начинающего офисного верстальщика, от 100 000 и выше получают опытные специалисты. HTML-верстальщик, работающий на фрилансе, сам определяет свою нагрузку: сколько продал и сделал, столько получил. Доходы на удаленке могут быть выше, чем у офисных работников.

Карьерные перспективы: куда расти

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

Итак, пути развития:

1. Сначала по классике: из верстальщика во Frontend-разработчики

Здесь распространены два пути:

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

2. Дизайнер-верстальщик

Это специалист, который совмещает верстку и дизайн, этакий многорукий Шива. Идти в это направление актуально, если вы планируете работать на себя. Если вы освоите две дисциплины, вам не придется искать дополнительного специалиста, который будет делать дизайн или верстать сайт.

Такая практика распространена на западе, в частности в США. А на просторах СНГ в вакансиях дизайнера часто пишут «со знанием верстки», снова дань тому самому – «всего да побольше, да подешевле».

3. Баннермейкер

Это тоже своего рода дизайнер, но он владеет дополнительными навыками, например, JS. Главный плюс – широкий простор для реализации творческого потенциала. Если вы устали от технической части и хотите побольше уделять внимание визуалу, вам сюда. Здесь, в отличие от предыдущих направлений, вам придется осваивать больше не технические тонкости, а психологию поведения людей и восприятия информации.

Как стать верстальщиком

Полный путь верстальщика с нуля до Senior (взято с habr.ru)

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

В общем, работа верстальщиком – это ступень, с которой вы можете стартовать в различные направления Digital. Главное начать, дорога строится под ногами идущего, так что вперед. Я уверен, что у вас получится!

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

Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик.
Многократно я слышал мнение, что верстка — удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти) веб-проекта. Это то, что пользователи видят в первую очередь. На текущий момент качественная вёрстка (особенно проектирование блоков) в крупном проекте требует большого количества различных навыков.

В данной статье представляю схему развития верстальщика

[большая по клику]
Само собой, это не всеобъемлющая и единственно верная схема. Есть ещё целая гора связанных навыков, релевантных технологий и так далее. Градация является субъективной.

Хочу сразу добавить, что конкретных ссылок на учебные материалы в статье не будет. Буду рад дополнениям в комментариях.

Чего мы ожидаем?

В первую очередь необходимо понять, чего мы ожидаем от человека на каждом из уровней. Ваши ожидания могут отличаться.
Junior — знает основные теги, может подправить контент на готовом html сайте, умеет грамотно форматировать текст, без проблем вставит встраиваемый элемент (ролик с ютуба, яндекс карту), ведёт работу через систему контроля версий только для себя (master, 1 контрибьютор). Может сверстать что-то несложное с нуля, и оно даже не поедет (лично у него). В целом не является самостоятельной единицей и требует руководства свыше.
Middle — более-менее автономная единица (либо полностью автономная для малых и средних проектов). Может хорошо сверстать сайт средних размеров, и он будет корректно отображаться во всех актуальных версиях браузеров. Понимает, как работают шаблонизаторы, и может их использовать (при условии предоставления остального кода). Умеет планировать и документировать свою работу и оценивать сроки. Понимает важность поддержания стиля кода. Понимает, зачем есть грид-системы и css фреймворки. Умеет брать всю необходимую информацию из макетов от дизайнера. Может взаимодействовать с небольшой командой, создавать ветки и пулл-реквесты.
Senior — может спроектировать систему блоков для крупного проекта. Знает, как избежать повторов и проблемных мест при использовании его кода другими разработчиками. Умеет декомпозировать сложные задачи и грамотно формулировать задачи. Умеет применять минимум одну методологию разработки (например, БЭМ). Может сделать так, чтобы проект открывался максимально быстро. Хорошо понимает несколько популярных шаблонизаторов. Способен написать сборщики и автоматизировать процесс, с этим связанный. Может проводить код ревью и курировать других верстальщиков.
Рассмотрим теперь чуть конкретнее, что включает в себя каждый из блоков на каждом уровне.

Junior

HTML — знание основных тегов, аттрибутов. Понимание, как его писать в принципе.
Типографика — умение отформатировать текст. Текст — основа практически любого проекта. Вставка неразрывных пробелов где надо, выделение жирным, курсивом, abbr и так далее. Можно использовать типограф или схожий сервис, но уметь понимать результат.
Семантика — понимание, что для определённых задач есть определённые теги. Уметь выбрать нужный тег.
Медиа — какие виды медиа можно встраивать в страницу.
Iframe — встраивание сторонних виджетов (видео, аудио, карты и т.п.).
Аудио, Видео — можно отложить изучение, т.к. частично решаются с помощью iframe. Понимать, какие форматы умеет воспроизводить браузер, как оформить плеер и так далее.
Картинки — какие графические форматы и в каком виде воспринимает браузер. Плюсы и минусы использование тех или иных форматов.
Растр — jpg, png, gif. Понимать различие форматов и уметь применять что и где надо.
SVG — можно отложить изучение, т.к. применяется реже, чем хотелось бы. Понимать плюсы, минусы, ограничения и т.п.
Шрифты — можно отложить изучение. На самом деле довольно сложная тема, и в общем случае я бы советовал начинающим использовать системные шрифты. Уметь подгрузить шрифты, оптимизировать отображение, минимизировать лаг отрисовки с кастомными шрифтами.
Табличная вёрстка — опционально. Для желающих верстать качественные email-рассылки в будущем.
CSS 1 — шрифты, цвета, выравнивание, размеры.
CSS 2.1 — управление поведением блоков, позиционирование, полноценное оформление.
Селекторы — простые селекторы на тег, класс, вложенный элемент. Простые псевдоселекторы типа :hover.
Именование — как называть классы, чтобы не было мучительно больно.
Блочная вёрстка — разбить картинку на осознанные блоки, воплотить блоки в HTML, оформить с CSS.
Браузеры — можно отложить изучение. Какие браузеры существуют, в чём их различие.
Инструменты разработчика — можно отложить изучение. Использовать инструменты браузеров, чтобы разбираться в проблемах отображения.
Текстовые редакторы — какие текстовые редакторы для разработчиков есть и зачем. SublimeText и Notepad++ приведены для примера, как хорошо мне знакомые. Уметь настраивать в них базовые вещи, такие как отступы, перенос строки и так далее.
Системы контроля версий — я лично считаю умение их использовать хотя бы индивидуально, лично для себя, очень важным. Понимать, для чего эти системы созданы и какие бывают.
Git — понимать в общих чертах задачу и принципы самой популярной системы контроля версий.
Github / bitbucket — уметь использовать одну из популярных площадок для git.
Checkout / commit / push / pull — базовые операции для личного использования.
Stash — для временного сохранения ненужных в данный момент данных.
10 работ — сделать минимум 10 работ в различном дизайне. Можно тестовых, это не важно. Важно, чтобы полноценных в рамках текущих знаний.

Middle

CSS 3 — градации, тени, сглаживание, фильтры, трансформации.
Продвинутые селекторы — элементы, следующие за опделённым (+), определённый по счёту (nth-child), shadow-dom, before/after и так далее.
Анимации — опционально. transition и animation. Плавные переходы, анимации. Понимать ограничения и минусы.
Сетки — зачем существуют, как выстраивать, какие есть готовые решения. Для примера можно посмотреть Flexbox grid или любой другой, который найдёте.
Фреймворки (CSS) — зачем нужны, как применять. Желательно научиться хорошо использовать минимум один. Очень пригождается для прототипирования. Значительно повышает качество проекта при отсутствии бюджета на дизайн (не уникально, но юзабельно).
CSS препроцессоры — можно отложить изучение. Оптимизация работы, более красивый и читабельный код. Переменные, миксины и т.п. Поработать с одним или несколькими популярными препроцессорами типа SASS, LESS, Stylus.
Media queries — можно отложить изучение. Отображение нужных стилей в зависимости от условий (устройство, размер экрана, плотность пикселей, версия для печати и т.п.).
Стиль кода — понять, для чего есть соглашения по стилям, изучить и начать применять любой (рекомендую от AirBNB).
DRY / KISS / SOLID — можно отложить изучение. Понять важные принципы разработки, ощутимо упрощающие дальнейшее сопровождение проекта.
OOCSS — опционально. Понять, что есть объектно-ориентированный css и для чего он. В том или ином виде используется во многих проектах (хоть и без понимания, что это он). В идеале, научиться проектировать. Может отлично зайти для крупных проектов.
Документация — понять, что и как документировать. Документировать. Можно отложить, но в будущем обязательно изучить разметку markdown.
Планирование — научиться оценивать сроки по картинке и определять последовательность работ.
Декомпозиция — можно отложить изучение. Научиться разбивать задачу на подзадачи. Это сложнее, чем кажется 🙂
Постановка задач — можно отложить изучение. Научиться чётко описывать задачи текстом так, чтобы другие разработчики, в том числе с меньшей квалификацией, достаточно однозначно понимали, что необходимо сделать для их выполнения.
Flexbox — понимание модели, умение применять полноценно.
Вёрстка писем — опционально. В целом навык не лишний. Понимать особенности почтовых систем, сохранить хороший внешний вид и не упасть в спам (если это не спам).
Полифилы — разобраться, как использовать самые актуальные возможности разработки, сохраняя обратную совместимость. Понять минусы и плюсы от такого подхода.
Кроссплатформенная вёрстка — понимать, что нужно делать, чтобы проект хорошо выглядел не только под Windows, Linux и Mac, но и под SmartTV или PS.
Кроссбраузерная вёрстка — понимать разницу рендера браузеров и заставлять их показывать одинаково. Сайт CanIUse очень помогает в этом.
Мобильная вёрстка — можно отложить изучение. Понимать, какие ограничения несут в себе мобильные платформы. Использовать лимитированное пространство грамотно.
Оптимизация — можно отложить изучение. Разобраться в «цене» тех или иных приёмов. Понять, из каких фаз состоит отображение сайта пользователю.
Загрузка — можно отложить изучение. Оптимизации, связанные с размером, кешем, сжатием, объединением ресурсов и т.п.
Отрисовка — можно отложить изучение. Оптимизации, связанные со скоростью рендера после загрузки.
SEO — можно отложить изучение. Хотя бы базовое понимание работы поисковых систем. Умение «помочь» поисковой системе разобраться, куда смотреть и что важно.
Шаблонизаторы — разобраться, каким образом можно переиспользовать код, группировать элементы и компоновать страницы. Очень желательно изучить как серверный рендеринг, так и клиентский. Сюда же входят шаблоны на «чистом» языке (типа простых PHP вставок). Работа «до» (dataflow) шаблонизатора нас не интересует.
PHP — можно отложить изучение. Разобраться в базовом синтаксисе и уметь внести мелкие правки, связанные с оформлением страницы.
CMS — можно отложить изучение. Узнать, какие CMS существуют и для чего они были созданы. Научиться писать шаблоны хотя бы для одной (рекомендую Wordpress).
Javascript — можно отложить изучение. Изучить базовый синтаксис, понять, как вешать простейшие обработчики и проводить простую работу с DOM.
jQuery — можно отложить изучение. Научиться экономить кучу времени для решения довольно типовых задач с использованием плагинов для самой популярной js библиотеки (после vanilla.js, конечно).
NodeJS — можно отложить изучение. Разобраться, как запустить простейший сервер, раздавать статику и рендерить на стороне сервера. Можно использовать Express или любой другой фреймворк.
Сборка — опционально. Научиться собирать проект из кучи CSS / HTML файлов в то, что нужно. Рекомендую ознакомиться хотя бы с grunt и gulp, как представителями «разных» лагерей.
IDE — опционально. Изучить, зачем нужны IDE и как их использовать. Перейти на использование какого-либо IDE для экономии времени. Важно: изучение IDE сравнимо с полноценным изучением языка программирования, и вкладывание большого количества времени в это может не оправдаться. Лично я пользуюсь текстовыми редакторами (и только для ооочень крупных проектов включаю IDE).
Branching — научиться управлять ветками в git.
Merge — научиться сливать ветки с разрешением конфликтов.
Fetch / Rebase — разобраться, зачем они, когда их применять, и начать применять по необходимости.
Графические редакторы — разобраться, какие бывают, для чего. Чем векторные отличаются от растровых. Важно понимать редактор хотя бы на уровне «чтения» макета от дизайнера. Выбрать правильный шрифт, размер, цвет и т.п. Чтобы не на глаз, а точно. Рекомендую поработать минимум с 1 растровым (Photoshop) и 1 векторным (Figma).
50 работ — к концу этапа у вас порядка 50 различных работ, демонстрирующих навыки из изученных областей.

Senior

Хоть на схеме и кажется маленькой эта группа, но фактически она самая большая. Т.к. к этому моменту необходимо изучить всё то, что откладывалось.
Адаптивная / Отзывчивая вёрстка — разобраться в высшей ступени и скомбинировать все полученные до этого знания. Проект должен выглядеть хорошо везде и на всём (в рамках разумного).
Постепенная деградация / Прогрессивное улучшение — понять, что это и зачем. Использовать.
Gitflow — уметь объяснить другим разработчикам, как создавать ветки, куда их вливать, как, уметь провести код ревью (вёрстки, само собой, не кода).
БЭМ — опционально. Разобраться в методологии, позволяющей создавать безлимитно крупные проекты так, чтобы при минимальной синхронизации различные команды могли использовать блоки друг друга. Есть и другие методологии, дающие не худший результат. К этому моменту о них вы так или иначе будете знать и сможете, при желании, изучить.
100 работ — иметь суммарно сотню работ, демонстрирующих различные полученные навыки. На самом деле, это всё условно. Можно иметь одну работу (состоящую из различных частей) в портфолио, которая уже покажет, что вам ничего не страшно.

Заключение

Фактически многие из этих тем небольшие. Однако держать кучу различных факторов в голове очень сложно. За 15 лет я общался менее чем с десятью верстальщиками (да и вообще программистами), которых отнёс бы к категории Senior (верстальщиков, программистов хороших было сильно больше).
Навскидку – на полноценное изучение и практику только вёрстки с нуля вполне можно затратить год (и более, если уходить в проектирование компонентов).

Надеюсь, тем, кто находится в начале пути, схема подскажет, куда можно ещё двигаться, и что не обязательно сразу (а можно и вообще не двигать в него) бежать в программирование.

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

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

Верстальщик – кто это такой, сколько он зарабатывает и как им стать с нуля

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сколько платят верстальщику

Средний месячный заработок HTML-верстальщика в России составляет 30-40 тысяч рублей. В Москве и Санкт-Петербурге специалист по верстке может рассчитывать на 55-65 тысяч рублей.

Удаленным сотрудникам принято оплачивать каждый выполненный заказ. Средняя цена за задание средней сложности, на которое требуется несколько часов, составляет от 3 до 5 тысяч рублей. Доход на фрилансе может варьироваться в пределах 40-60 тысяч рублей.

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

Верстальщик – не самая сложная профессия в 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 рублей в месяц.

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

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

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

Перспективы и карьерный рост

Для того чтобы построить успешную карьеру, необходимо освоить такие специальности, как HTML-кодер, Frontend-разработчик, веб-дизайнер. Всего за 2 года рядовой верстальщик может стать арт-директором или начальником отдела верстки. Его зарплата в таком случае стартует от 85 000 рублей в месяц. В зарубежных компаниях перспективный специалист по верстке получает до 8 000 евро.

Если вы хотите работать верстальщиком официально, рекомендую пересмотреть вакансии на этих сайтах (ссылки ведут сразу на подборки для верстальщиков):

Если вы решили стать фрилансером, то можете поискать заказы на специальных биржах:

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

Кому не подойдет профессия

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

• не имеете опыта работы с текстовыми редакторами;
• отсутствуют навыки в создании сайтов;
• не умеете работать с графическим редактором Photoshop;
• не знаете язык программирования JavaScript.

Заключение

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

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

Хотите освоить профессию верстальщика? Тогда читайте нашу статью “Курсы по верстке сайтов”. Множество полезных рекомендаций и ценной информации также можно найти в статьях “Курсы HTML” и “Обучение CSS”.

Вступление на путь верстальщика ⁠ ⁠

Итак, ты прочел название и заинтересовался. Сейчас я немного сумбурно, но все же введу тебя в курс дела, если ты совсем в «в этом вашем вебе» не понимаешь.

Что же такое верстка?

Если вкратце, то это процесс создания страницы сайта. Заметьте, статичной страницы, без каких либо скриптов. Верстальщик использует языки разметки, в данном случае подразумевается HTML5/CSS3, с помощью которых размечает страницу. Создает ее с самого зеро, то есть с пустого документа.

HTML – используется исключительно для разметки. CSS или каскадные таблицы стилей – для управления потоком документа, придания элементам, заранее созданным в разметке определенной формы, размещения их в том или ином порядке, манипуляций с текстом, размерами etc. Они идут в связке.

В итоге получается готовая страница сайта. Сайты верстают, чаще всего с psd макетов, которые предоставляет дизайнер. Макет разбирают в фотошопе. После верстки готовый документ не является завершенным сайтом. Это просто оболочка, причем статичная. Дальше идет обработка с помощью JS, подключение скриптов, работа серверных программистов и еще куча всего.

По сути, если собрался становиться именно верстальщиком, то необходимо не слишком большое количество скиллов.

Однако верстальщики сейчас на рынке не так востребованы. Намного чаще требуются именно фронтендеры. Фронт-енд – клиентская сторона создания сайта. То есть работа на стороне браузера. Если сильно обобщить, то она включает в себя как верстку, так и работу со скриптами.

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

Так вот, фронтендер, даже самый начинающий должен знать сильно больше верстальщика. Тут лучше продублирую ОП-пост:

На данный момент фронтендеру новичку нужно учить больше, чем просто HTML/CSS. В частности необходимы продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.

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

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

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

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

Основные направления: фриланс или конторки.

О фрилансе ты наверняка слышал хоть немного. Есть местные или зарубежные биржи, где люди выкладывают свои заказы разных уровней. От «поправь шрифт на сайте для мобильных версий» до «запили мне рабочий аналог фейсбука за 30 долларов» (утрировано). Из зарубежных самый популярный – Upwork. Кстати в воркаче есть постоянно живущий тред по апворку, где можно узнать больше информации, советую читнуть тамошний фак.

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

Конторки – местные кружки веб-макак локального или глобального уровня. Пилят от мелких сайтов торгашам с рынка, до довольно крупных продаваемых приложений (если тебе повезло в такую попасть со старта). Основная задача местных анонов – пробиться в одну из них. Собственно, материалы в треде как раз и предназначены для того, чтобы выбить ентри левел. Через несколько месяцев пребывания там, ты, если не конченый дебил, уже и сам будешь знать, что тебя ждет, что дальше делать и куда двигаться.

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

МАТЕРИАЛЫ, ПОЛЕЗНЫЕ ССЫЛКИ И СОВЕТЫ ПО ОБУЧЕНИЮ.

Сначала вкратце по процессу обучения: если совсем нихуя не знаешь, то лучше начинай учить именно HTML/CSS. Сверстаешь свой первый макет – учись верстать адаптивно. Почитывай материалы в инете, разные статейки, смотри интересные примеры, практикуйся, спрашивай непонятное в треде, читай литературу представленную здесь и ищи что-то сам. Постепенно придет понимание всех этих процессов, и че это вообще за хуйня. Как почувствуешь уверенность в верстке – перекатывайся на JS (мастхев, если хочешь развиваться). Можешь параллельно прикручивать готовые скрипты к своим сайтикам, смотреть что как работает. Ну а дальше работы не паханое поле. Двигайся, куда тебе захочется.

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

1. Первичные материалы в хаотичном порядке. Они часто дублируют друг друга. Можно проходить что-то одно по одному из направлений. Личные предпочтения выскажу ниже.

http://htmlacademy.ru/ — ультрагоднота, советую начинать изучение HTML/CSS отсюда. У них же есть интенсивы (обучающие видеоуроки, для лучшего понимания предмета, тоже мастхев) ссылки чуть ниже.

http://learn.javascript.ru/ — по JS на русском лютая годнота. Годнее только Флэнаган. Лучше начинать учить язык отсюда, потом уже книги.

http://codeschool.com/ — тут платно, но есть бесплатные курсы, годные вещи про jquery и git

http://htmlbook.ru/ Справочник. Каждый верстальщик пользуется им. Все непонятное смотрим там.

http://teamtreehouse.com — тут все платно, но первые две недели бесплатно, можно успеть пройти пару курсов, объясняют хорошо.

Интенсивы от академии:

Базовый интенсив HTMLacademy за 2015 год:

Продвинутый интенсив HTMLacademy за 2015 год:

Лично я бы советовал сначала браться за http://htmlacademy.ru/ . В идеале пройди базовые курсы у них на сайте, затем купи/скачай с торрента интенсивы, пройди их.

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

Затем переходи на продвинутый интенсив. Твоя основная задача там — освоить продвинутые инструменты верстки и адаптивность. Сверстай парочку тамошних тестовых макетов применяя все вышеописанные технологии и приемы.

Дальше можешь выкачивать макеты с простор интернета и верстать уже их. Наращивание сложности приветствуется. Где не прописана адаптивность, тоже запили сам. Старайся в каждом новом проекте улучшать код. Черпай инфу из инета и литературы. Узнавай полезные приемы.

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

Для работы понадобятся текстовые редакторы или среды разработки, тут уж решать надо самому.

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

http://www.ozon.ru/context/detail/id/20279391/ — «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript и CSS» Весьма неплохая книга, бегло позволит ориентироваться в основах веб-технологий и понять, как же все это говно вместе работает.

http://habrahabr.ru/post/240219/ — «Выразительный Джаваскрипт» Хавербек Марейн. Вводна книга по JS и программингу в целом. Для новичков может быть сложноватой.

http://frontendbookshelf.ru/ — список полезных книг. Большинство актуальны, можно выбрать по языку, технологии и конкретному уровню знаний. Первооочередную литературу желательно брать оттуда.

http://scanlibs.com/ что-то типа хранилища айти книг. Скачать книги можно бесплатно. Там есть дохуя всего. Если в свободном доступе не найдете, попробуйте поискать там.

Учебное задания УЛЬТРА ХАРДКОР ЛЕВЕЛ. Если считаешь, что тебе мало учебной хуйни. Сделай это и положи к себе в портфолио. Будет что показать на собеседовании. На данный момент устарели, но попрактиковаться все-таки можно:

Появились новые тренировочные задания с ТЗ:

ПРИМЕРЫ ВЕРСТКИ ДЛЯ САМЫХ МАЛЕНЬКИХ:

Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ.

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

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

http://frontender.info — годный ресурс по фронт-енд тематике

http://habrahabr.ru/post/114256/ — чеклист верстки. Если ваше говно проходит хотя бы половину пунктов, вы без проблем найдете работу в своем задрищенске.

tympanus.net/codrops — тут есть годная еженедельная подборочка новостей из мира фронт-енда, рикаминдую

http://www.smashingmagazine.com/ — многое отсюда так или иначе переведено на русский, ресурс полезный для развития

http://css-tricks.com/ — тут можно найти много готовых шаблонов для решения часто встречающихся задач

http://ru.bem.info/ — БЭМ, методология фронт-енд разработки от Яндекса, рикаминдую прочесть доки, наверняка вы нихуя не поймете, но фраза «я прочитал конечно документацию БЭМ, но в силу своего уровня пока понял оттуда совсем немного» звучит на собеседовании гораздо лучше чем хлопание глазами. По БЭМу также немного поясняют в интенсиве академии.

http://goratchet.com/ — mobile first фреймворк от создателей бутстрапа.

http://getbootstrap.com/ — бутстрап. без комментариев, маст хэв. Популярный фронт-енд фреймворк, можно положить его в сонову вашего проекта или быстро накидать сайтец, если дизайн не важен.

http://www.ibm.com/developerworks/ru/ — очень неплохой ресурс от всем известной компании, есть там и статьи про веб-разработку.

http://sass-lang.com/ , http://lesscss.ru/ , http://lesscss.org/ , http://learnboost.github.io/stylus/ — тоже полезные шутки, значительно прокачивают ваш CSS. Так называемые препроцессоры. Я пользуюсь less.

http://codepen.io/ — ресурс с кучей интересных примеров кода.

Список полезных каналов на ютубе

3.Что делать дальше?

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

Запили себе портфолио, желательно на гитхабе. Там же можно через gh-pages отображать готовые странички из репов. По сути, имитировать хостинг, только он неполноценный. Впрочем, для заказчика и этого хватит.

Гайд от анона по гитхабу:

Постоянно пополняй портфолио, улучшай знания, развивайся. Пролистай вакансии в своем мухосранске. За его пределами тоже посмотри. Поймешь необходимые требования и направления развития. Можешь запилить резюме. Где это делать – решать тебе. Не бойся ходить на собеседования, разве что по знаниям будешь сильно отставать. Как минимум тебя направят в нужное русло, что-то подскажут.

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

Как правило, несколько месяцев хватает на то чтобы научиться хорошо верстать, а это уже претензия на трудоустройство. На Джаваскрипт уйдет больше времени, хотя хардкорный JS необходим для вакансий, что уровнем повыше будут(но не всегда).

ОБЩИЕ МАТЕРИАЛЫ БЕЗ ОСНОВАТЕЛЬНОЙ СОРТИРОВКИ

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

Макеты для верстки:

Гайды по форматированию кода:

http://mdo.github.io/code-guide/ — стайлгайд по форматированию HTML и CSS

CSS Style Guides http://css-tricks.com/css-style-guides/ — Статья со списком стайлгайдов

Ставить или не ставить закрывающий слэш? (англ.) http://www.colorglare.com/2014/02/03/to-close-or-not-to-clos. — статья-рассуждение по поводу закрывающего слэша в одиночных тэгах

Пояснение по блочной модели/сетках:

Хорошая статья про флоаты на английском All About Floats | CSS-Tricks — http://css-tricks.com/all-about-floats/

Фотошоп для верстальщика :

Улучшение и полировка кода, полезные приемы:

Progressive Enhancement или всё-таки Graceful Degradation — http://habrahabr.ru/post/157115/

Так ли дорого прогрессивное улучшение? — http://habrahabr.ru/post/163877/

Туториал: Progressive enhancement на примере формы входа — http://htmlacademy.ru/demos/1

Progressive Enhancement: практичный подход к современной кроссбраузерной разработке. Видео доклада и презентация. — http://tech.yandex.ru/events/yac/2012/talks/373/

Тесты поддержки новых возможностей в браузерах

Набор полифилов и рекомендаций

Сборник CSS3 анимаций

Генераторы CSS3 свойств

Стартовый шаблон страницы

Наборы веб шрифтов

Работа с префиксами

Продвинутый валидатор ХТМЛ

Замеры скорости работы сайта

Таблица UTF-8 символов

Паттерны для фонов

Введение в JavaScript:

Библия и 9 заповедей начинающего версталы от господа бога Гугла

Тут ещё немало полезной инфы, актуальной, вдруг кому пригодится https://otzyvmarketing.ru/profession/website-html-editor/

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

Актуально в 2020?

Благодарю! Сохранил этот клад себе.

Социальная инженерия глазами жертвы⁠ ⁠

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

Большая часть компьютерных атак становятся успешными благодаря социальной инженерии. Ежедневная рутина сопровождается прочтением десятков писем, среди которых легко пропустить единственное «поддельное».
Мы провели более 20 успешных проверок, в которых использовалась социальная инженерия. Раз за разом один результат – удивление и фраза «мы знали о таком, но сами не видели». Банальные и базовые ошибки в работе сотрудников и недоумевающий взгляд администраторов.
Таким образом, получилось сформулировать задачу – наглядно указать, на что обратить внимание в ежедневной работе, чтобы не стать жертвой таких атак.

Кому и как это использовать?

Администраторам и специалистам по ИБ – пожалуйста, используйте материал как брошюру для обучения сотрудников. Информация для вас лично указана отдельной сноской.

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

Общие правила при прочтении писем

Само по себе прочтение поддельного (фишингового) письма ничего опасного за собой не влечет. Но переход по ссылке в письме или открытие документа приведут к серьёзным последствиям.

Мы получили следующее письмо:

Предупреждения на этапе прочтения письма

Предупреждения почтового клиента – это не нормально:

Это еще не делает письмо фишинговым, но обязано насторожить.

Важно!

Такие предупреждения – один случай на сотню. В большинстве случаев никаких предупреждений не будет:

Адрес отправителя

Мы знаем, что наш почтовый адрес — zubilin@originsecurity.ru.
Адрес отправителя — originsecurity@mailer.xyz.

Первое правило:
ВСЕ, что написано ДО знака «@» – неважно!
Письмо отправили не ваши коллеги, если есть различие хоть в одном символе после знака «@».
Такое письмо необязательно фишинговое, но уже нельзя слепо верить написанному, сразу же открывать вложения и переходить по ссылкам.

Важно!

originsecurity.ru и 0riginsecurity.ru, например, являются разными именами. Злоумышленник использует такие способы маскировки, как: замена буквы «о» на цифру «0» или буквы «l» на цифру «1», две буквы «rn» на одну «m» и наоборот и т. д.

Как видно – письмо отправили не сотрудники финансового отдела, как написано в тексте. После «@» имя другого предприятия. Это уже повод обратиться в отдел информационной безопасности или к другому администратору, который подскажет куда обратиться и что сделать.

Для администраторов и специалистов ИБ:

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

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

Далее.

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

Подпись отправителя

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

В случае несоответствия обратитесь к администраторам, высказав свои подозрения.

Вложение в письме

Если на компьютере установлен антивирус – это ни в коем случае не защищает вас на 100%.
Внимательность – лучшее средство защиты.
Следующая задача – посмотреть на имя файла вложения:

Формируем новое правило:
Важно только то, что написано после ПОСЛЕДНЕЙ точки.

Мы указали только популярные форматы. Если файл вызывает подозрения, то лучше перестраховаться и получить рекомендацию администратора.

Для администраторов и специалистов ИБ:

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

В подготовке правил фильтрации почтовых вложений помогут уже существующие наработки. Так, автор Oletools собрал в одном месте расширения исполняемых файлов (https://github.com/decalage2/oletools/blob/master/oletools/rtfobj.py, 280 строка).

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

В нашем случае формат вложения «.exe». Уже 2 серьезных триггера, смело обращаемся к специалистам по безопасности или администраторам. С вероятностью близкой к 100% письмо фишинговое.

Документы Microsoft Office

Если потенциальному злоумышленнику удалось убедить вас открыть документ Microsoft Office – запомните еще одно простое правило:
Если источник недоверенный, как бы вас не просили – НИКОГДА не нажимайте на кнопку
сверху. На любую кнопку сверху.
Ни «Разрешить редактирование», ни «Включить содержимое», ни что-либо еще.
Формулировка на таких кнопках не передает сути и масштаба угрозы. Равносильно кнопке «Заразить компьютер».

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

Для администраторов и специалистов ИБ

Мы не рассматриваем сценарии, когда атака направлена на эксплуатацию уязвимостей MS Office. Ведь у ваших сотрудников установлена актуальная версия ПО и автоматическим его обновлением занимается сервер WSUS.

Ссылки в тексте

Просьба перейти по ссылке и ввести свои данные – главное оружие в фишинге.

Вы переходите по ссылке в письме и видите сайт вашего предприятия.

Первое, что мы проверим – соответствие адреса сайта в адресной строке адресу сайта вашего предприятия:

Внимание на строку, отмеченную красным. Строчка, отмеченная зеленым ничего не значит. Злоумышленник способен написать там что угодно!

Различие хоть в одном символе сигнализирует об опасности сайта (сайт-оригинал goSuslugi.ru, в примере же ссылка на goZuslugi.ru) – закрываем сайт и обращаемся к администратору.

Правило для обращения со ссылками:
Просьба ввести учетные данные (авторизоваться) на сайте по ссылке – признак фишинга. Не вводите свои данные на сайтах из писем, когда не уверены в отправителе.

Замочек возле сайта

Иллюзию безопасности сайта создает замочек возле него (обычно зеленый или серый).
Запомните раз и навсегда:
Никакой замочек возле сайта не является гарантией безопасности!
Важен только адрес сайта. Ничего больше.

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

Виды почтовых атак. Фишинг целевой

Это случай, рассмотренный ранее:

Атаки нацелены на сотрудников предприятия, имеют определенную идею и часто хорошо подготовленные вредоносные вложения и сайты.

Для администраторов и специалистов ИБ

При обнаружении таких писем собственноручно или при получении информации от сотрудника рекомендуется:

1. Выполнить почтовую рассылку сотрудникам предприятия с предупреждением о фишинге. Дать в письме инструкции и запретить открывать вложения или переходить по ссылкам, вводить учетные данные;

2. Определить получателей писем по фишинговому почтовому домену;

3. Если масштабы проблемы ограничены несколькими получателями, лично обсудить рассылку (кто что открыл, куда перешел и т.д.);

4. Заблокировать утекшие учетные данные при их наличии;

5. Добавить домен в черный список на почтовом сервере или средстве защиты;

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

Виды почтовых атак. Фишинг массовый

Такие атаки берут не качеством, а количеством. Рассылаются во множество предприятий и склоняют сотрудника к действию под давлением на страх, «халяву» и т.д.
Бесплатный сыр только в мышеловке. Поговорка точно описывает метод защиты от этого вида фишинга. Есть и дополнительное правило:
Запрещено даже вчитываться в такие письма. Злоумышленники умело управляют эмоциями жертв.

Виды почтовых атак. Вейлинг

Фишинговые атаки на конкретного человека на предприятии. Крайне тщательно подготовленные вредоносные вложения и тематика. Злоумышленник изучает жертву, либо знает о деятельности жертвы (направляет фишинговое письмо на тему закупок по адресу zakupki@originsecurity.ru, например).

Для администраторов и специалистов ИБ

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

Виды телефонных атак. Вишинг

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

Если неизвестный человек звонит на мобильный и интересуется рабочими вопросами (процедурой входа в здание предприятия, наличием охраны, рабочими программами, ФИО сотрудников, и чем-либо еще по работе) НЕ ВАЖНО кем он представился – спросите ЕГО рабочий телефон (свой не давайте) и сообщите, что готовы обсуждать рабочие вопросы только по рабочему телефону. Так же уточните как к нему обращаться и из какого собеседник отдела.

Злоумышленник может заговаривать зубы и даже угрожать (увольнением, лишением премии и т.д.). Кладите трубку с фразой: «Я не могу обсуждать это по телефону, всего доброго». И заявляете о своих подозрениях специалистам информационной безопасности или администраторам. Никаких претензий или штрафных санкций к вам после такого заявления не может быть применено.

Для администраторов и специалистов ИБ

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

Виды физических атак. Подбрасывание носителей информации

Подобранные (на территории предприятия или в домашнем подъезде, неважно) носители информации (флеш-карты памяти, диски и т.д.) запрещено подключать к компьютерам предприятия.
Популярная атака – раскидать флешки (или что проще – диски, подписанные «Зарплата кадры 2023») по периметру предприятия, в надежде на любопытство жертвы. Сразу при подключении такого носителя компьютер заражается, и злоумышленник проникает в сеть.

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

Для администраторов и специалистов ИБ

Исследование подобных устройств и носителей должно проходить на изолированных от сети компьютерах или виртуальных машинах.

Виды физических атак. Подключение носителей информации сторонними лицами

Пройти пост охраны дело техники. Находясь на территории предприятия злоумышленник просит случайного сотрудника распечатать документ с его компьютера. Сотрудник своими руками подключает флеш-карту памяти, открывает зараженный документ и заражает сеть.
Злоумышленник покидает место проникновения с напечатанными документами и довольной улыбкой.
Метод противодействия прост – ведем человека к администратору и если тот посчитает нужным, то распечатает документ. Или же правило:
Не позволяйте подключать неизвестные устройства и накопители информации к своему
рабочему компьютеру.

Заключение

В заключении сформулируем еще одно, последнее правило:
Не пересылайте потенциально опасный документ коллегам!
Обычно это происходит со словами: «У меня не открывается, попробуй ты». Мы сталкиваемся с такой инициативой на каждом третьем аудите. Будьте внимательней.

То, что на первый взгляд кажется объемным справочником – на деле перечень простых правил, которые помогут распознать большинство атак с использованием социальной инженерии.
Даже если вы попались на уловку злоумышленника, сообщили какую-либо информацию, открыли документ или ввели учетные данные – ОБЯЗАТЕЛЬНО сообщите об этом в отдел информационной безопасности или администраторам. Таким образом вы снимите с себя ответственность, а специалисты смогут быстро отреагировать и не дать злоумышленнику использовать полученную информацию.

Для администраторов и специалистов ИБ

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

Чтобы ничего не забыть, сделали для вас плакат-напоминание. Печатаем, вешаем на стену,
пользуемся. Оригинал по ссылке

Ответ на пост «Советы тем, кто реально хочет стать программистом»⁠ ⁠

в IT котируются две вещи: мотивация, мозги и умение считать до трех)

А если серьезно — лучше в IT идти менеджером\QA и т.п., чем программером. Если человек не стал программером к сознательному возрасту, то зачем тратить столько сил, когда можно получить результат (деньги и интересную работу) проще?

Но, все же, если прям в программеры, то вот мой список в порядке убывания приоритета:

1. Определиться, в какой области программить: фронт? бэк? низкоуровневые котроллеры? хайлоад? бигдата? геймдев (фронт? бэк? ии?). Для каждого пункта свой набор требований и дальнейшие пункты

2. Определиться, какое количество ресурсов ты готов на это потратить. Это хобби, потенциально могущее перерасти в работу? Это сфера деятельности? Ты свободен как ветер и можешь позволить себе экспериментировать, или у тебя семеро по лавкам и зарплата тебе нужна вот прям через месяц? Ты можешь убить полгода на то, что не выгорит?

3. Исходя из п.2 трезво оценить п.0: качество своих мозгов и длину шила в попе. Одно, в принципе, компенсируется до некоторой степени другим. Т.е. человек после ядерной физики даже без особой мотивации освоит, условно, питон для бигдаты или С для контроллеров. Человек, который (мое увожение) смог соскочить с иглы или дочитал Улисса, в состоянии освоить рихтера и пойти джуном в c#.

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

4. В IT очень быстрый фидбек. Не плитку класть, конечно, но и не работы уровня нобелевки, когда человек полжизни работает на свое имя, а потом имя на него. Тут ты сегодня чего-то стоишь, а завтра пролетаешь, как фанера над Парижем. Ты либо тащишь, либо вседавайпока. Плюсы такой ситуации — шанс есть у каждого. Минусы — расслаблять булки не получится. Люди без поинтов из п.3 тупо не задерживаются в IT, вне зависимости от специализации.

5. В зависимости от выбранного на п.1 направления, прокачивать соответствующие скилы. Например, в моей области (c#, микросервисы, бэк) знание алгоритмов сортировки ну никак не поможет работе. А вот понимание, на каком уровне модели OSI реализуется TLS — очень даже. Умение написать обход дерева пригодится едва ли, а понимание отличия асимметричного шифрования от симметричного — более чем. Даже знание принципов ооп (король умер, да здравствует король) не так уместно, как, например, навык профилирования SQL-запроса. А уж сколько я видел менеджеров, которые перт-диаграмму даже в уме не строят (не надо так).

6. И да, самое главное — это получать удовольствие от того, что делаешь. Иначе тут вообще никак, спечёшься. А для этого нужно понимать, что доставляет тебе удовольствие, понимать себя (тут уместны аналогии с сексом). Меня, например, штырит от состояния потока. Про это сказано много, по делу и не, но вкраце: в потоке качество твоей жизни подпрыгивает. С этим мало что может сравниться. Как сказал один коллега, ты получаешь кайф, а тебе за это еще и деньги платят) А если у тебя уже есть в своей области поток, подумай хорошенько, стоит ли его терять!

Ответ на пост «Советы тем, кто реально хочет стать программистом»⁠ ⁠

Принцип подстановки Лисков на паровозиках: у васть есть базовый класс Паровозик. От него наследуются (т.е. развивают идею Паровозика), четырехколесный Светлячок, восьмиколесный Муравей, шестнадцатиколесный Верблюд и восьмиколесный Стрела. При этом у вас есть водонапорная станция, которая умеет заправлять водой, станция с углем и рельсы. Каким бы ни был паровозик, он ездит по рельсам, станции умеют заправлять его водой и углем, при этом они не задумываются, что это за паровозик. Потом вы придумываете электровоз, но он не может развивать идею паровозика, поэтому вы решаете, что сделаете базовый класс Поезд, от которого наследуется Паровозик и Электровозик, с Поездом умеют взаимодействовать рельсы, с Паровозиком — водонапорная станция и станция с углем, а ЛЭП умеют взаимодействовать с Электровозиком.

Кажется, кто-то умный сказал, что если ты не можешь ребенку объяснить сложную вещь, ты ее не понимаешь.