Skip to content

Latest commit

 

History

History
284 lines (235 loc) · 23.9 KB

README.md

File metadata and controls

284 lines (235 loc) · 23.9 KB
Raw

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

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

Коротко

Подробно

Английский язык

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

HTML и CSS

Графические редакторы

Самые популярные: Photoshop и Sketch.
В ~90% случаев Photoshop'а будет достаточно, дизайнеры только недавно начали переходить на Sketch. Sketch вообще под Windows не работает, но есть почти-решение в лице zeplin

Необходимый минимум, чтобы начать работать:

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

Инструменты разработчика в браузере

Это набор инструментов, помогающих быстро найти и исправить ошибку. Верстальщиками часто используется для поиска ответа на вопросы: “почему не отображается?”, “откуда такие размеры?”, “я же его перекрасил” и тд.
Умение пользоваться этими инструментами сохранит вам кучу времени и нервов.

Emmet

Набор сниппетов для HTML и CSS, дающий супер-скорость.
Лучше 1 раз почитать документацию и сразу начать использовать.

Семантика и доступность

Правильное именование

Имена должны нести в себе смысл. Цель — сделать код хорошо читаемым и легко поддерживаемым.
У новичков часто можно встретить <b class="b">, <div class="div13>" и все в таком духе. Это неправильно. Также нельзя использовать транслитерацию <div class="shapka">.
Общепринятый язык для именования — английский.

Responsive/adaptive верстка

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

jQuery

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

Подключение шрифтов

Сборка спрайтов

Спрайт — графический файл, в котором сгруппировано много изображений небольшого размера. Такая организация графики позволяет минимизировать количество запросов за сервер и ускорить загрузку сайта.

Оптимизация изображений

Во времена быстрого интернета легко забыть о том, что нужно оптимизировать изображения. Недавно я проверял работу начинающего разработчика и прогнал изображения через оптимизатор. Картинки похудели на 86% (16 мегабайт). Вдумайтесь.
Также важно уметь выбрать оптимальный формат графики (jpg, png, gif, svg).

Работа с SVG

SVG-спрайты

CSS-анимации и плавные переходы

CSS-методологии

Сотни их: OOCSS, BEM, SMACSS и тд. Не обязательно все использовать, но вы должны иметь представление о лучших практиках css-архитектуры.

CSS-фреймворки

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

Верстка писем

Ад мира HTML-верстки. Привет из нулевых. Тут свои правила и до сих пор верстка таблицами. Звучит плохо, на деле еще хуже.

Командная строка

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

Git

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

CSS-препроцессоры

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

Шаблонизаторы

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

Автоматизация: таск-раннеры

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

Тестирование верстки

Плох тот разработчик, который не тестирует свою работу.