В большинстве профессий, особенно в сфере IT, определяющим фактором карьерного роста становится не наличие диплома о высшем образовании. Гораздо большее значение имеют горящие глаза и непреодолимое желание развиваться в своем деле.
Верстальщики чаще всего начинают с прохождения курсов, а дальше уже дело за наработкой опыта и скорости работы. И чтобы стать востребованным специалистом в этой области будет нелишним иметь под рукой список инструментов, которые станут вашими верными помощниками и будут двигать вас вперёд.
Рабочее место
Первое, что будет помогать или, наоборот, мешать вам в планомерном движении вперёд – это ваше рабочее место. Обустройте его так, чтобы работа была в кайф. Чтобы работа над каждым проектом приносила удовольствие.
Тут у каждого свои предпочтения. Кому-то нужен рыжий кот, мирно сопящий около клавиатуры. Кому-то heavy metal в наушниках и полумрак в комнате.
Если говорить о технической стороне вопроса, то с самого начала работы рекомендуем обзавестись двумя мониторами. Они увеличивают рабочую область и делают процесс работы удобнее – отпадает необходимость постоянно переключаться между окнами программ.
Шпаргалка по тегам HTML
Путь любого верстальщика начинается с изучения тегового языка разметки веб-страницы – HTML. И основной конструкцией этого языка является тег.
Наверняка вы уже знаете, что всего существует более 100 тегов. Не нужно впадать в панику и думать, что вам придется выучить их все наизусть. Примерно 50-60 % тегов не используют даже продвинутые верстальщики.
Всё, что вам нужно, это один раз ознакомиться с полным перечнем, чтобы иметь представление, какие вообще теги существуют в природе. А потом пользоваться шпаргалкой, которую можете найти здесь. Через несколько месяцев работы все часто используемые теги вы запомните, а остальные может и не пригодятся вовсе.
Семантика кода
HTML 5 взял на себя задачу по определению типа контента, содержащегося в тегах и его четкой роли на странице. В соответствии со спецификацией HTML 5 каждый из элементов принадлежит к какой-то категории (текстовое содержимое, заголовочное, потоковое, интерактивное и др.).
Семантически верный код помогает поисковым системам понять важность контента того или иного сайта для вывода их в топ. Поэтому, работая с семантическими тегами HTML 5 при верстке, вы определяете для поисковика важность частей вашей страницы.
Семантические теги HTML 5, конечно, не совершат прорыва в SEO-продвижении созданных вами страниц. Но будут значимой деталью этого процесса.
Pixel Perfect
Pixel Perfect – это технология вёрстки, когда созданный HTML-шаблон пиксель-в-пиксель совпадает с PSD-макетом. Если наложить оригинал картинки на сверстанный макет, то оба изображения должны совпасть.
Одноименное название имеет расширение для Google Chrome, которое призвано помочь вам создавать разметку сайта максимально приближенную к разработанному дизайн-проекту. Установите это расширение и проверяйте страницу на соответствие макету на любом этапе верстки.
Препроцессоры CSS и HTML
Препроцессор – это программа, которая упрощает процесс написания кода и делает его валидным, структурированным и логичным.
Для того, чтобы использовать препроцессоры нужно скачать программу. Она будет следить за файлами, предназначенными для препроцессора и компилировать их содержимое в чистый код.
Самые распространенные препроцессоры CSS:
- Sass
- LESS
- Stylus
- PostCSS
Для HTML одним из самых популярных препроцессоров стал Pug.
Освоить препроцессоры можно только одним проверенным способом – методом проб и ошибок.
Автопрефиксеры
Прежде чем говорить об автопрефиксерах, нужно разобраться, что вообще собой представляют сами префиксы.
С префиксами приходится работать всем разработчикам, но не все понимают, для чего они используются. Префиксы ставятся перед каким-то значимым элементом и указывают, что данное свойство будет реализовано в указанном браузере (например, -webkit- является префиксом для браузеров Chrome, Safari, Opera).
А вот с помощью автопрефиксеров возможна оптимизация процесса. Автопрефиксер получает на входе данные об используемых стилях и ищет в них плохо поддерживаемые свойства. Когда он находит такое свойство, он добавляет префиксы стилям, которые должны поддерживаться тем или иным браузером.
Так что использование этого инструмента упрощает жизнь всем разработчикам.
Оптимизация изображений
Это вопрос, изучение которого не стоит откладывать в долгий ящик. Поскольку картинки будут встречаться вам в каждом проекте.
Благодаря оптимизации изображений можно уменьшить их размер, а соответственно, и количество скачиваемых данных, что в свою очередь увеличит скорость загрузки и работы сайта.
В большинстве случаев эта оптимизация осуществляется с использованием специальных сервисов. Сжатие изображений происходит быстро и без потери качества. Вы загружаете своё изображение, а на выходе получаете картинку, уменьшенную в весе в несколько раз.
Онлайн-сервисы для оптимизации изображений:
- Optimizilla
- TinyJpg
- ImageOptimizer
- ImageOptim
- Compressor
Task-менеджеры
Верстальщик на любом этапе своего развития, как профессионала, должен задаваться вопросом оптимизации совей работы.
Одним из эффективных инструментов оптимизации работы верстальщика является task-менеджер. Это автоматический сборщик проекта, который включает в себя:
- компилирование файлов SASS, LESS;
- автопрефиксер;
- сжатие JavaScript-файлов и изображений и т.д.
В интернете можно найти множество сборщиков проектов на любой вкус – Gulp, Grunt, Brunch. Можно сначала ознакомиться с подходами, используемыми в каждом из них и выбрать, какой больше всего подходит вам.
Использование готовых решений
Веб-страницы разных сайтов содержат много похожих элементов. Это меню, формы обратной связи, навигация и так далее. Для экономии времени и, опять же, для оптимизации своей работы можно использовать уже готовые решения. При этом докручивать, дополнять их можно бесконечно. И в итоге элемент вашей страницы может выглядеть совсем иначе, чем исходный.
В интернете есть стоки, где есть эти готовые решения. Например, на сайте nisnom.com вы найдете множество вариантов оформления кнопок, меню «бургер», всплывающих подсказок и многого другого.
Проверка кроссбраузерности
Кроссбраузерность – это корректность отображения сайта в различных браузерах. И задача эта ложится на верстальщика. Чтобы не надеяться на русский авось, проверяйте этот показатель ещё до того, как сдали проект.
Онлайн-сервисы для проверки кроссбраузерности сайта:
- Browsershots
- Browserling
- CrossBrowserTesting
- MultiBrowser
- Browserstack
- Equafy
- Browsera
Технология CSS Grid
Эта технология в скором времени станет неотъемлемым инструментом работы верстальщика. Grid – это шаблон, работающий по системе сеток и представляющий собой набор горизонтальных и вертикальных линий, которые создают размеры контента в grid-контейнере.
Технологию CSS Grid используют для выравнивания и позиционирования элементов страницы, а также для создания адаптивных версий сайта.
Добавление динамических карт
Как правило, динамические карты на сайтах встречаются также часто, как и изображения. А значит, вам необходимо обязательно освоить технологию их добавления.
Несмотря на опасение новичков в этом процессе нет ничего сложного. Нужно зайти на специальные сервисы, предоставляемые Яндекс или Google, создать там свою карту, получить iframe или script и вставить в соответствующее место своего HTML-документа.
Мастер-классы по верстке
На это можно смотреть вечно. На то, как другие верстают. А если видео снято человеком с многолетним опытом в верстке и грамотными комментариями в нужных местах, то вы сможете получить ответы на многие свои вопросы и получить новые знания.
Андрей Гаврилов, основатель WAYUP, на своём YouTube-канале проводит онлайн-мастер-классы по верстке с нуля. Приходите, даже если вы только задумались о том, чтобы начать свой путь верстальщика.
Игры для верстальщиков
Для получения практических навыков вёрстки необязательно заниматься монотонным написанием кода. Можно делать это в увлекательном игровом формате. В интернете есть множество браузерных игр, некоторые из которых подойдут даже для детей и новичков без опыта.
Подробный обзор на игры для верстальщиков читайте в нашей статье.
Обратная связь
Не имеет значения, работаете вы в офисе или на удаленке, вы – часть команды. И даже если вы совсем недавно на должности верстальщика не бойтесь доносить свои мысли до веб-дизайнеров и project-менеджеров.
Для решения каждой задачи в верстке существует несколько способов решения. И кто знает, может быть, выбранный именно вами вариант привнесет в проект положительные моменты.
Если вы будете общаться с коллегами и слышать друг друга, это будет помогать развиваться каждому из вас, действия будут согласованы, а результаты радовать и команду, и заказчиков.
Путь карьерного и профессионального роста способен пройти только тот верстальщик, который любит своё дело, с интересом и ответственностью относится к каждому проекту и даже, в какой-то степени, страдает перфекционизмом.