Взял и сделал: как из продавца стать верстальщиком
Поговорили с Антоном Пановым, верстальщиком компании Say What. Антон занимается вёрсткой полтора года и рассказывает, почему он ушёл из продаж, какие инструменты использует и как новичку выучить HTML и CSS.
— Ты занимаешься вёрсткой полтора года, чем занимался до?
Работой совсем не связанной с программированием. Довелось поработать водителем, продавцом (а в последствии зам. управляющего магазином) в DNS.
— Почему ушёл из продаж в вёрстку?
Потому что работа в продажах была временной мерой, пока учился в университете. В то время я даже не видел себя разработчиком. Мне казалось это слишком сложным. Но в определенный и переломный момент в моей жизни (родился сын, ушел из продаж), мне подвернулась вакансия junior разработчика. Так всё и началось.
— Что нужно минимально знать, чтобы верстать сайты?
HTML, CSS, JavaScript. HTML — язык разметки, используется для описание структуры проекта (можно представлять себе как «скелет»). CSS — язык стилей, необходим для создания визуальной составляющей. JS — язык программирования. Он делает веб-странички «живыми».
— Как думаешь, сколько нужно учиться до мастера?
Нет предела совершенству. Да и вообще у каждого индивидуальные способности к обучению. Но за год-два активного обучения и тренировок, я думаю, можно чувствовать себя достаточно уверенно.
— Кому не рекомендуешь идти в профессию?
Непоседам и консерваторам. Процесс разработки фронтенда да и вообще любой разработки требует усидчивости. А консерватизм в современном постоянно развивающемся мире веб технологий, считаю непозволительным.
— Насколько нужны PHP, jQuery, AJAX для верстальщика? Вообще насколько важно знать программирование?
Я себе уже не представляю верстку без JS. Хотя по началу учатся именно HTML и CSS, но это не программирование в чистом виде. HTML это язык разметки, CSS таблицы стилей. Со временем понимаешь, что некоторые задачи фронтенда просто не решить без программирования на JS. PHP желательно понимать хотя бы на начальном уровне. Ведь простая задача адаптировать под мобильные экраны рабочий, запрограммированный сайт, введет начинающего верстальщика в ступор. Когда понадобится дописать или немного изменить структуру веб страницы.
— Есть ли у тебя какой-то принцип, по которому ты работаешь?
KISS (keep it short and simple), при стилизации и разметке использовать любую методологию, главное чтобы была. Ну и нужно понимать, что после тебя с кодом будут работать другие люди, поэтому нужно делать так, чтобы было понятно не только тебе.
— Вёрстка сайтов — это творчество или рутина?
Считаю, что это творчество. Если для вас это стало рутиной, значит что-то нужно менять.
— Где черпаешь вдохновение?
tympanus.net/codrops — обучающие статьи для фронтенд-разработчиков, идеи и решения для дизайна.
codepen.io — на лету можно смотреть как работает код, аналог jsfiddle.net, только более няшный.
— Какую самую крутую работу видел?
Считаю крутыми работы компании webgears.ru, вообще попадались интересные работы на просторах интернета, но как то ссылки не сохранились. Так же очень нравится анимированная векторная графика.
— Какие ресурсы порекомендуешь читать?
habrahabr.ru, stackoverflow.com, smashingmagazine.com
— Какие книги?
Много рекомендаций дать к сожалению не могу, читал только «Выразительный JavaScript», Э.Фримен, Э.Фримен «Изучаем HTML, XHTML и CSS (Бестселлеры O’Reilly)». В основном изучал все по возникающим вопросам в ходе разработке. Очень важно научиться гуглить :)
— Какие инструменты используешь?
Jade — шаблонизатор для упрощение написания HTML.
Sass (SCSS) — для упрощения написания CSS.
Gulp — для автоматизированной сборки проекта.
Git — система контроля версий.
— В каком редакторе пишешь код? Если поддерживает плагины, то какие используешь?
Sublime Text 3, если выбирать IDE то WebStorm.
Список основных плагинов, которые использую в ST3:
-
Package Control — плагин для установки других плагинов.
-
Emmet — с ним можно писать HTML в сокращённом виде.
-
BracketHighligther — выделяет открывающий и закрывающий теги, делает их более заметными.
-
Color highlighter — подсвечивает номер цвета указанным цветом.
-
ColorPicker — выбор цвета мышкой из цветового поля.
-
HTML-CSS-JS Prettify — правильно и быстро расставляет отступы.
Занимаетесь вёрсткой и программированием и хотите рассказать о своих любимых инструментах или плагинах? Пишите на p.fedorov@netology.ru
Полный текст статьи читайте на Нетология
