Дизайнер разрабатывает макет сайта. В нем отображаются разделы и рубрики, фоновые изображения, количество и положение блоков на страницах. Итог усилий дизайнера – графические изображения, «картинки», которые еще только предстоит перевести в функционирующий интернет-ресурс. В этом и заключается работа верстальщика сайтов: он реализует созданную дизайнером концепцию.
Содержание
Работа html-верстальщика: обязанности и инструменты
Задача специалиста – адаптировать дизайн-макет с помощью языка разметки, то есть набора команд и символов, которые задают вид и положение информации на веб-странице. Для этого нужно написать код и разместить элементы страниц: заголовки, изображения, рамки.
Обязанности верстальщика не ограничиваются «переводом» дизайн-макета на язык веб-верстки. Профессионал должен сделать так, чтобы страницы быстро открывались в каждом из популярных браузеров и хорошо просматривались с мобильных устройств.
В помощь новичкам разработаны программы, которые автоматизируют часть операций и позволяют писать код в наглядном режиме. Это означает, что вы будете сразу видеть результат в отдельном окне и сможете быстро исправить ошибки.
В начале своей работы верстальщик без опыта может использовать такие программы, как CSS3 Generator, Livetools Ui Parade, NetBeans, но крепкие профессионалы редко прибегают к помощи наглядного режима. Он нужен разве что в качестве вспомогательного инструмента.
Привыкайте писать код вручную. Понимаю, что это непросто, я и сама прошла тернистый путь от использования программ-помощников до полностью самостоятельной работы над кодом. Но только так можно добиться корректной кодировки и быстрой загрузки страниц. Проверять результат рекомендую не через плагины, а открывая страницы в разных браузерах.
Работать верстальщиком можно в офисе и удаленно: многие крупные компании поддерживают дистанционный формат сотрудничества. В офисе или дома – эта профессия требует знаний, навыков и определенного склада характера: скрупулезности, усидчивости, внимательности.
Доработка готового дизайна сайта: из статического изображения делаем анимацию
Базовые профессиональные требования к верстальщикам:
- Знание языков HTML, CSS, JavaScript
- Умение работать в текстовых редакторах
- Навыки работы в Photoshop
- Создание интерактивных сайтов
- Разработка адаптивных сайтов
Умение свободно читать по-английски будет бонусом, потому что многие мануалы написаны по-английски, а перевод либо появляется с большим опозданием, либо не появляется вообще. Знание иностранного языка выручит даже на этапе обучения, потому что полезные обучающие программы и профессиональные блоги часто ведутся на английском. Но не так все критично — есть достаточно много хороших ресурсов, обучающих на русском, например, htmlacademy.ru.
Карьерные перспективы
Как и в любой профессии, в верстке есть свои этапы карьерной лестницы. Вакансии верстальщика без опыта работы подразумевают, что вас возьмут на позицию «джуниора». Задача Junior – уметь исправить контент на готовом сайте, отформатировать текст, вставить необходимые элементы. Junior верстает несложные задачи с нуля и учится, учится, учится под руководством более опытных коллег, чтобы дорасти до «миддла».
Middle самостоятельно работает над проектами средней сложности. Он может собственноручно, без указок со стороны, сверстать сайт так, чтобы тот корректно отображался в большинстве браузеров. Middle умеет использовать шаблонизаторы, документировать свою работу, может взаимодействовать с командой. Но плох тот «миддл», который не мечтает стать «сеньором».
Я начинала работу на фрилансе с уровня «джуниора». Найти задачи на биржах было непросто, поэтому мой вам совет: если есть возможность, устраивайтесь в офис, растите под руководством коллег до «миддла», и только после этого отправляйтесь в свободное плавание.
Senior способен создать стильный код для крупного проекта. Он умеет использовать чужой код, избегая повторов и проблемных мест, формулирует задачи для работы с верстальщиками без опыта. Senior способен написать сборщики – плагины и фреймворки, которые объединяют элементы проекта и оптимизируют результат.
Процесс написания кода для сайта в CSS: базовый код, задающий расположение блоков на странице
Где научиться азам верстки?
- htmlacademy.ru — Интерактивные онлайн-курсы по основам html и CSS, учиться можно дистанционно, в свободном режиме. Часть программы – бесплатная, но за что-то придется заплатить.
- coursehunters.net/source/htmlacademy — Видеокурсы от html-академии, наглядно и доступно объясняющие азы.
- learn.javascript.ru — Учебник по JavaScript, позволяющий самостоятельно освоить этот язык с нуля.
- ucheba.ru/uz — Образовательный портал от Mail.ru для дистанционного обучения IT-специальностям, включая веб-верстку.
- netology.ru — Университет по дополнительному обучению в веб-сфере – предлагает платные курсы по разным актуальным направлениям, включая программирование и верстку.
- specialist.ru — Центр «Специалист» приглашает на всевозможные программы и курсы, касающиеся веб-верстки и программирования, в том числе – базовые уроки для новичков.
Актуальность верстальщиков на рынке фриланса
Верстальщик – одна из самых востребованных профессий для заработка в интернете. Она будет востребована до тех пор, пока будет существовать сеть. Со временем меняются только инструменты, но необходимость в профессионалах, способных превратить дизайн-макет в работающий сайт, не исчезает. Это не значит, что ваши перспективы на фрилансе будут радужными, и вы быстро найдете десяток клиентов.
Когда я только начинала работу в качестве фрилансера, с заказами было настолько трудно, что даже подумывала бросить эту специальность или устроиться в офис. Загвоздка была в том, что объем задач по верстке при разработке сайта не такой уж и большой. Поэтому компании стремятся найти специалиста, который не только верстает, но еще умеет писать код и рисовать в Photoshop. А в идеале — еще и писать тексты. С навыками одной только верстки я не выдерживала конкуренции.
Пришлось много учиться, я освоила и Photoshop, и копирайтинг, и верстку, и seo-продвижение. Постепенно стало понятно, что в копирайтинге у меня получается продуктивнее всего. Но все остальные умения дают мне преимущества, когда заказчику нужно сделать проект “под ключ”.
Средний чек за работу
Зарплата офисного работника в Москве колеблется от 30 до 100 тысяч рублей в месяц. Она зависит от вашего опыта и квалификации, а также специфики и масштабности нанимателя. В регионах зарплата чуть ниже: 20-90 тысяч рублей по состоянию на весну 2018 года.
Работа верстальщиком удаленно не исключает стабильной месячной оплаты: немало компаний нанимают специалистов на полный рабочий день и со ставкой, но дистанционно. При таком формате сотрудничества вы должны быть на связи в течение рабочего дня 5 дней в неделю, как если бы сидели в офисе.
Если вы планируете работать в качестве фрилансера, средний чек – 5 тысяч рублей за заказ. Увеличить стоимость своих услуг можно, обучаясь, решать все более сложные и масштабные задачи, которые оплачиваются лучше.
Типичное задание с типичной ценой для верстальщика уровня Middle на fl.ru
Начиная работать верстальщиком на дому, не пренебрегайте простыми и недорогими заказами. Они помогут набить руку и набраться опыта. Но избегайте ушлых посредников, которые занижают стоимость работы, чтобы положить разницу себе в карман. Если вам предлагают оплату намного ниже средней – это повод насторожиться.
Минимальная стоимость работы уровня Senior на fl.ru
На фрилансе вы столкнетесь с еще одним неприятным типом людей – клиентами, которые стремятся навесить на новичка дорогостоящие задачи за малые деньги. Мне не раз приходилось вести переговоры о работе уровня Middle за 3 тысячи.
Сначала казалось, что это мой шанс повысить уровень, ведь меня приглашали для выполнения задачи, которая была чуть выше моих рутинных возможностей! Но потом я узнала, сколько стоит такая работа на самом деле, и поняла, что меня элементарно использовали. Не повторяйте моих ошибок: проверяйте среднюю стоимость задачи, когда возникают сомнения.
Как проверить? Вы можете создать подобный проект на fl.ru и посмотреть, какие цены предлагают, составьте вилку цен и определите среднюю стоимость.
Понравилась статья? Поделитесь с друзьями. Есть что сказать? Напишите комментарий ниже.
