Вёрстка — это не тупо.

Осознанность и HTML/CSS 🔗

Если вы читаете этот опус, то вы, наверное, не настоящий сварщик.

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

Умение интуитивно ощущать собственные ошибки очень важно. Это чувство означает, что вы быстро замыкаете цикл обратной связи и учитесь на ошибках.

Не решайте костылями проблемы в вёрстке, а понимайте, что верстаете и как это делать правильно.

Учить матчасть

• HTML: The Living Standard
• w3schools.com
• htmlbook.ru
• htmlacademy.ru
• developer.mozilla.org
• 📖Большая книга CSS3

☆ Собственные проекты 🔗

Это лучшая практика. Стоит верстать и программировать самостоятельно, хоть в начале пути, хоть уже устроившись на n-нную работу. Так обкатываются изучаемые подходы, если в рабочих проектах их невозможно применить. Так — запрещёнными приемами и интересными решениями — компенсируется рутина.

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

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

Проектирование и системное мышление 🔗

Отрядом книг уставил полку,
Читал, читал, а всё без толку… Александр Пушкин

Знания — не сила. Умение ими пользоваться — возможно. Бороться с возрастающей энтропией сложностью разрабатываемых систем (помним, что вёрстка это тоже система) можно структурируя знания и код, используя методологии и определяя принципы проектирования.

Усвоив хотя бы несколько, можно заочно стать программистом.

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

Yes, please.

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

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

Из баловства вполне помогают упражнения со словарём LinguaLeo, книги и кино.

Заинтересованность в обучении 🔗

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

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

Все профессионалы тренируются и учатся. За учёбу никто не платит. Вы занимаетесь ею, чтобы вам платили за основную работу — и платили хорошо.

Не забывайте:

• труднее учиться, если уже считаешь себя учёным;
• практика и впечатления — простой способ закрепить изученное;
• знания, за которые платите вы, а потом платят вам, усваиваются лучше;
• ↵ бумажные книжки лучше электронных;
  • ↵ читайте то, что интересно узнать и то, что можете прочитать;
    • ↵ книги на русском понятны, читаются быстро и лучше запоминаются;
• не забывайте ничего.

Знать как верстают другие 🔗

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

Elementary

• 📖Дэвид Макфарланд «Большая книга CSS»
• 📖Дэн Сидерхолм «CSS3 для веб-дизайнеров»
• массово поглощать статьи в духе «как верстать и не облажаться»
• сохранять себе чужие сниппеты.

Intermediate

• 📖Лиа Веру «Секреты CSS. Идеальные решения ежедневных задач»
• подписаться на других клёвых ребят;
• читать от корки до корки журналы вроде frontender.info;
• регистрироваться во всех мыслимых и немыслимых социалках и узнавать как они в целом свёрстаны и оформлены;
• инспектировать вёрстку каждого_встречного_компонента;
• экспериментировать и рефакторить у себя;
• находить баги на чужих сайтах;
• сохранять себе чужие и свои сниппеты.

Advanced

• устраивать холивары на «Хабре».

Junior Stack Overflow Developer 🔗

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

Задавать вопросы — не стыдно. Стыдно просидеть весь день и не написать ни строчки, потому что чего-то не понял.

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

А ещё Гугл следит, насколько крутые и специфические запросы вводит пользователь, и начинает обрабатывать его как потенциального кандидата.

$ git know --basics 🔗

Всегда используйте версионирование. Хоть в команде, хоть в одиночку. Практика частых коммитов, возможности смотреть историю изменений и прочая красота сильно помогает. Каждый рабочий проект начинайте с репозитория. Учебные или личные проекты храните в личном «Битбакете» — там бесплатные приватные репозитории. Что-то особо клёвое можно вынести в публичный «Гитхаб».

Ключевые моменты:

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

• Ежедневная работа с Git
• Git How To
• git-scm.com

Сниппеты 🔗

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

Изобретать велосипед плохо для дела, но хорошо для обучения.

А зачем это?

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

Примеры кода 🔗

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

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

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

Архитектурные методологии 🔗

Сначала архитектура. 80% времени надо думать, что где лежит, как работает и с чем взаимодействует. 10% записывать это. 10% переписывать это наново.

OOCSS всегда можно брать за основу, там низкий порог вхождения. Принципы BEM могут помочь избежать беспорядка, когда проект будет бесконтрольно разрастаться. «Атомный дизайн» тоже необходимо понять и вынести из него полезные для себя подходы.

Тема сложная. Но и вёрстка это не тупо. Здесь есть чему поучиться у программистов.

• Принципы хорошей архитектуры CSS
• Организация файлов
• Работа с CSS-препроцессорами и БЭМ
• Кратко обо всём
• Модульность
• SMACSS
• BEM and SMACSS
• Компоненты

Лирическое отступление

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

Семантика и именование объектов 🔗

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

Одна из наиболее важных частей, о которой следует помнить при написании семантического и доступного кода — это сделать всё возможное, чтобы использовать стандартный язык разметки, что возвращает нас к пункту HTML/CSS.

• Семантика и доступность
• Часто используемые слова в CSS-классах
• Что такое нормальные классы

Документация 🔗

Странный пункт — требовать знание документации. Её достаточно единожды внимательно прочитать и забыть, чтобы спустя годы, во время какого-то затыка, вспомнить:

— Тю! Так это даже в документации есть!

• HTML Attributes
• CSS Reference
• CSS Almanac
• Словарь терминов

Отвечают знатоки

• caniuse.com
• htmlreference.io

Спецификации и черновики читать по желанию.

Препроцессоры 🔗

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

Надо не просто знать о существовании препроцессоров, но и уметь на практике всё от переменных и вложенности до циклов и переборов.

Забегая наперёд: всё настраиваем на автоматическую сборку. Так чтоб сразу красиво было.

Ага, вот эти ребята

• LESS
• SASS
• Плагины PostCSS
• Возможности PostCSS

Фреймворки и библиотеки 🔗

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

Прежде чем изучать «Бутстрап», убедитесь в том, что вы изучили CSS, отзывчивую вёрстку, препроцессоры и методологии. Все эти вещи куда полезнее.

Интерфейсные шаблоны 🔗

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

Главное в дизайне — композиция и незаметная простота интерфейса. Это всё легко достигается правильным использованием шаблонов проектирования, а это значит, что нужно уметь сразу «верстать красиво».

Минимум

• 📖Дженнифер Тидвелл «Разработка пользовательских интерфейсов»
• Короткие советы по основам дизайна
• Основы типографской верстки
• Компоненты Material Design UI и спецификации к ним.
• Компоненты Bootstrap уже ведь все знают? Так ведь, да?!
• Как решать дизайнерские задачи?

• Принципы интерфейсов на примерах ОС

• macOS Human Interface Guidelines
• Microsoft UWP Guidelines

Мы ещё вернёмся к дизайну, а пока послушаем парнишу, которого никто не любит:

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

Доступность и надёжность 🔗

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

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

• Доступность сайтов для «самых маленьких»
• Google Webmaster Guidelines
• Использование WAI-ARIA
• Введение в schema.org
• Словари микроразметки
• Open Graph

Hardcore

📖Joshue O Connor «Pro HTML5 Accessibility»

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

И можно скормить вёрстку валидаторам.

Мобильность 🔗

Если вкратце, то надо проштудировать все Web Fundamentals и уметь отвечать на вопрос What Makes a Good Mobile Site?

Знать и уметь:

• резиновые сетки;
• принципы «перестройки сетки» и что-то ещё;
• @media, макро- и микробрейкпоинты;
• отладка в эмуляторе и на телефоне;
• организация кода разных версий: мобильной, планшетной, обычной.

Курсы

🎓Responsive Web Design Fundamentals

Вёрстка текста 🔗

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

© Максим Ильяхов

Разобрать

• Основы дизайна текста
• Висячая пунктуация и прочие невыносимые вещи
• Шпаргалка по оформлению текста
• «Типограф» ∙ Орфограф
• 📖Робин Вильямс «Дизайн для НЕдизайнеров» — отвратительно, но понятно

Hardcore

• 📖Роберт Брингхерст «Основы стиля в типографике» — божественно
• 📖Йозеф Мюллер-Брокманн «Модульные системы в графическом дизайне» — прямоугольно

Вёрстка форм 🔗

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

C заполняемыми пользователем формами нужно быть осторожными, внимательными и заботливыми.

HTML Forms Guide — там сколько всего интересного: табиндексы, автофокусы, подсказки, ограничения, html5 атрибуты полей для системной поддержки.

• Подсказки от Гугла
• Очень старая песня о главном

Уточка атакует

📖Дженнифер Тидвелл «Разработка пользовательских интерфейсов» — там и про формы, там про всё

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

Всего лишь знание нескольких нюансов, хорошее отношение к электронной почте и несколько практических приёмов дают вам дополнительный ценный навык.

• Campaign Monitor: Coding your emails — обо всём на свете
• Базовые принципы
• Что можно использовать
• Гуглить дальше

Веб-шрифты 🔗

— Теперь оно моргает при рефреше!

Со шрифтами до сих пор как-то всё коряво и все на это забивают.

• Как использовать кастомные шрифты в вебе и не сойти с ума
• Оптимизация
• Быстрее!

Фотошопы 🔗

Надо уметь правильно определять графику для экспорта, ловко её сохранять в любых размерах и оптимизировать PNG, SVG, JPG, понимая когда что нужно. Уметь переносить стили слоев в css руками или автоматом. Из самостоятельной работы нужны владения текстовыми и векторными инструментами.

Картинки

• Растровая и векторная графика
• Форматы изображений
• Оптимизация изображений

Инструменты

• Working with the Type Tool in Photoshop
• A Comprehensive Introduction to the Type Tool
• Mastering Photoshop with Paths

Лайк а босс

• Требовать от дизайнера соблюдения правил организации макетов.
• sketchapp.com/learn

SVG 🔗

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

Обязательно уметь собирать всё в спрайты.

• 📖J. David Eisenberg «SVG Essentials»
• 📖Pocket Guide to Writing SVG
• SVG в вебе. Практическое руководство
• Why Inline SVG is Best SVG
• Пример SVG иконок

Иконочные шрифты 🔗

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

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

Что делать

• Научиться генерировать и встраивать
• Всё равно перейти на SVG-иконки:
• Seriously, Don’t Use Icon Fonts
• Inline SVG vs Icon Fonts

Быстрый инструментарий 🔗

IDE, «Саблайм», «Атом», «Брэкетс», с emmet или без, да хоть вообще vim — не принципиально. Главное, чтобы вы там удобно и быстро писали всё, что приходит в голову, а не вспоминали полчаса нужную комбинацию клавиш.

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

• EditorConfig — обязательно
• IDEA Configuration

Форматирование 🔗

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

Хорошо написанный код экономит время другим разработчикам. Следуйте чьему-то подходу или соблюдайте принятый в команде. Главное в этом деле — постоянство.

• Nicolas Gallagher's Idiomatic CSS
• GitHub Code Guidelines
• Google HTML/CSS Style Guide

Отладка 🔗

Режим отладки это теперь ваш ближайший друг и помощник.

Анализ

• Официальный курс Explore and Master Chrome DevTools
• Официальная инструкция Chrome DevTools
• Плагин Web Developer
• Тестирование и отладка верстки под IE

Скорость

• ☆Принципы работы современных веб-браузеров
• Основы быстродействия
• Чеклист оптимизации скорости загрузки
• Rendering: repaint, reflow/relayout, restyle
• Understanding the critical rendering path

Точность 🔗

Верстать надо так, чтобы PerfectPixel был не нужен.

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

• Пример чеклиста про код
• Пример чеклиста про внешний вид
• Пример чеклиста обо всём

Соблюдайте размеры из макетов, если там они систематизированы, или сами следите, чтобы у вас в вёрстке всё было ровно. Можно воспользоваться чем-то вроде 8pt grid (и дизайнерам про это расскажите).

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

Сейчас, когда неуклюжих браузеров перестало быть свыше 9000, а на Хабре статьи о кроссбраузерности не появлялись с 2011 года, сам термин «кроссбраузерно» наконец-то может означать «одинаково во всех браузерах». По возможности этого и надо добиваться.

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

Всё нужное по теме можно найти в документации «Мурзиллы»: Cross browser testing.

Было бы в высшей степени непрофессионально передавать на проверку QA заведомо дефектный код. А какой код является заведомо дефектным? Любой, в качестве которого вы не уверены! Роберт Мартин, «Идеальный программист»

jQuery 🔗

В jQuery используется знак $. Вам это о чём-нибудь говорит?

Сама по себе jQuery — замечательная библиотека с развитой экосистемой плагинов. Многие считают её этаким стандартом для разработки сайтов. Но это библиотека, а не язык программирования.

В первую очередь изучить основы языка (или основы программирования, если об этом надо ещё раз повторять). Без понимания фундаментальных механизмов JavaScript не получится эффективно решать возникающие проблемы.

Если нужна только работа с DOM, то можно использовать что-нибудь более простое и может даже изящное.

• Как оно вообще
• 📖Антон Шевчук «jQuery для начинающих»

<!-- TODO: добавить ещё ссылок про джейквэри -->

Автоматизация

Компиляция, валидация, оптимизация и запуск должны быть переложены на сборщик. Gulp — уже хорошо. Можно разобраться с grunt.

• $ npm
• $ gulp
• $ webpack — если вы уже совсем всё освоили и начали гаситься по джаваскрипту

Незаменимое дополнение к пункту про препроцессоры и структурирование. Сборка собственных и рабочих проектов должна войти в естественный и привычный подход к организации вёрстки.

Настройка хостов и CMS 🔗

Просто научитесь настраивать хотя бы старые добрые WordPress и Bolt. Знайте htaccess и wamp/xamp. Попробуйте хипстерские jekyll, ghost. Шелестеть файлами по ftp тоже всё ещё надо. И ssh ещё живой.

Отдельной строкой npm и его друзья из секции выше.

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

Программирование 🔗

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

Кажется, что нужно срочно учить JS (фронтенд как-никак), но можно начать и с более оформленного языка вроде Питона или Си — просто чтобы просто понять что да как.

Принципы проектирования мы уже знаем. Так ведь?

Прогрессивные технологии 🔗

Наша базовая техническая прогулка подходит к концу. Далее вас ждут приключения.

Веб-компоненты, X-Tag, Polymer, Custom Elements и прочий Shadow DOM в том или ином виде пытаются появиться на свет уже третий раз. Это новый вариант создания модулей, который позволяет получить (почти) гарантированную инкапсуляцию кода, верстки, стилей и действительно удобный и стандартизированный интерфейс к ним.

Приживётся ли — пока не ясно. Понимание этих штук полезно как «взгляд в будущее» на то, какой станет вёрстка.

• Понятно и просто про веб-компоненты и Polymer
• Polymer Project
• webcomponents.js
• CSS Modules: Welcome to the Future
• Getting Started with CSS Modules
• Внедрение компонентного подхода в вебе
• Accelerated Mobile Pages

Письменное изложение мыслей 🔗

Умейте писать кратко и по делу.

Письма коллегам, детали задач, описание коммитов, документация, комментарии в коде, сам код, ленивая переписка в чатике, записки на холодильник — везде надо писать хорошо.

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

Что делать

• 1. Начать ценить время других. Бессмысленные комментарии в коде или непонятные письма заставляют адресатов либо разбираться во всём самим, либо переспрашивать.
• 2. Освоить этикет деловой переписки.
• 3. Избегать формализмов и прочей ерунды.
• 4. Прививать критичный взгляд на текст можно начиная с «Инфостиля» — там всё просто и увлекательно. Потом выбрать что-то посложнее.
• 5. Вставлять гифки вместо текста.

Общение по делу и критика 🔗

С окружающими нас дизайнерами и программистами есть о чём поговорить по делу.

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

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

• 📖«Discussing Design»
  Adam Connor, Aaron Irizarry
• 📖«Articulating Design Decisions»
  Tom Greever

Можно попробовать ворваться в общий «этикет для чайников», но и там всё сложно:

• 📖«У них так принято»
  Росс Маккаммон
• 📖«Не кладите смартфон на стол»
  Дороти Джонсон